[Flutter] 뒷 배경이 보이는 투명한 아이콘 만들기

LOCKED·2021년 1월 18일
2
post-thumbnail
post-custom-banner

위의 이미지와 같이 배경의 색을 그대로 아이콘에 적용할 상황이 있을 때는 다음과 같이 하면 된다.

class TransparentIconWidget extends StatelessWidget {
  final Widget child;
  final Color color;

  const TransparentIconWidget({Key key, this.color, this.child})
      : super(key: key);
  
  Widget build(BuildContext context) {
    return ShaderMask(
        blendMode: BlendMode.srcOut,
        shaderCallback: (bounds) =>
            LinearGradient(colors: [color], stops: [0.0])
                .createShader(bounds),
        child: child);
  }
}

ShaderMask 위젯을 사용하여 blendMode를 적용하여 아이콘의 색상을 제거하면 된다.

profile
Flutter 개발자 :'>
post-custom-banner

0개의 댓글