[Flutter] 카드에 반투명한 이미지 만들기

1. 카드에 이미지를 뛰운다. 꽉 채워서

2. 해당 카드를 반 투명하게 만든다.

3. 중간에 텍스트를 뿌린다.

  Container(
            padding: const EdgeInsets.only(left: 8, right: 8),
            width: double.infinity,
            height: 250,
            child: Card(
              child: Image.network(
                'https://storep-phinf.pstatic.net/linesoft_01/original_13.gif?type=pa50_50',
                fit: BoxFit.fill,
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          ),

이미지는 라인에서 가져옴

 

Image쪽에 0.5 alpha, colorBlendMode를 준다.

Image.network(
                'https://storep-phinf.pstatic.net/linesoft_01/original_13.gif?type=pa50_50',
                fit: BoxFit.fill,
                color: const Color.fromARGB(128, 255, 255, 255),
                colorBlendMode: BlendMode.modulate),

이 상태에서 왼쪽에서 오른쪽으로 Fade효과를 주기위해 FadingEffect 클래스를 만든다.

import 'package:flutter/material.dart';

class FadingEffect extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromPoints(const Offset(0, 0), Offset(size.width, size.height));
    LinearGradient lg = const LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [
          //create 2 white colors, one transparent
          Color.fromARGB(200, 255, 255, 255),
          Color.fromARGB(0, 255, 255, 255),
        ]);
    Paint paint = Paint()..shader = lg.createShader(rect);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(FadingEffect linePainter) => false;
}

 

Card 위젯을 CustomPaint로 한번 감싸고 foregroundPainter효과로 FadingEffect를 준다. 

 

 

이제 마지막으로 중간에 Text를 추가한다.

처리 과정에서 텍스트를 같이 처리해야 해서 Stack 위젯으로 감싸고 SizedBox로 다시 이미지의 크기를 맞춰줬다.

위젯으로 만들어서 편리하게 사용하기

ManualCard.dart

Widget ManualCard(String strCardText, String strImagePath, {bool isNetworkImg = false}) {
  return Container(
    padding: const EdgeInsets.only(left: 8, right: 8),
    width: double.infinity,
    height: 250,
    child: Card(
      child: Stack(
        children: [
          CustomPaint(
            foregroundPainter: FadingEffect(),
            child: SizedBox(
              width: double.infinity,
              height: 250,
              child: isNetworkImg ? Image.network(
                  strImagePath,
                  fit: BoxFit.fill,
                  color: const Color.fromARGB(128, 255, 255, 255),
                  colorBlendMode: BlendMode.modulate
              ) :
              Image.asset(
                  strImagePath,
                  fit: BoxFit.fill,
                  color: const Color.fromARGB(128, 255, 255, 255),
                  colorBlendMode: BlendMode.modulate
              ),
            ),
          ),

          Container(
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.only(left: 16, ),
              child: Text(strCardText, style: const TextStyle(color: Colors.black, fontSize: 32, fontWeight: FontWeight.bold)))
        ],
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
    ),
  );
}

 

https://stackoverflow.com/a/62783106/17141266