Flutter

ImageFiltered와 ImageFilter.mode를 사용하면 된다.

예시는 png파일로 했는데, png 파일은 Image.asset()에서 color로도 변경 가능함.

💻Code

leading: GestureDetector(
            onTap: _onXTap,
            child: Container(
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: ImageFiltered(
                imageFilter: const ColorFilter.mode(
                  Color(ThemeColors.outerSpace),
                  BlendMode.srcIn,
                ),
                child: Image.asset(
                  "assets/images/x.png",
                  width: 22,
                ),
              ),
            ),
          ),

ImageFilterd

픽셀을 low-level 단계로 처리해주는 위젯.

ImageFilter.blur : 흐리게
ImageFilter.matrix : 변환, 확장, 번역, 왜곡, 회전 등을 모든 행렬에 사용 가능

등 이 외에도 많은 종류가 있는데, ImageFilter를 쉽게 사용하는 방법은 필터링 하려는 위젯을 ImageFiltered으로 감싸고 필터를 적용하기만 하면 됨.

// blur
ImageFiltered(
	imageFilter: ImageFilter.blur(x, y),
    child: Image(),
)

//matrix
ImageFiltered(
	imageFilter: ImageFilter.matrix(
    	Matrix4.rotationZ(double).storage,
        ),
    child: Image(),
)

//color
ImageFiltered(
	imageFilter: ColorFilter.mode(color, blendmode),
    child: Image(),
)

BlendMode.srcIn

이미지를 새로운 색상으로 바꿀 수 있는 blendmode.

원본 이미지를 표시하지만 두 이미지가 겹치는 부분만 표시.
대상 이미지는 렌더링되지 않으며 단지 마스크로 처리됨.
대상의 색상 채널은 무시되고 불투명도만 영향을 받음.

flutter.dev | BlendMode
Flutter | ColorFiltered
Flutter | ImageFiltered