ColorFiltered class
자식에 ColorFilter를 적용합니다.
이 위젯은 지정된 ColorFilter 에 따라 child 콘텐츠 의 각 픽셀에 독립적으로 함수를 적용합니다. BlendMode를 사용하여 Color를 적용하려면 ColorFilter.mode 생성자를 사용하세요. child 아래에 있는 콘텐츠에 ColorFilter를 적용해야 하는 경우에는 BackdropFilter 위젯을 대신 사용하세요.
공식 문서 코드
기본적으로 플러터에서는 이미지에 color 값으로 색을 넣어줄 수 있다. 그런데 막상 해보면 자신이 원하는 그런 색이 입혀지거나 변동되는 것이 아닌 그냥 그 색이 되어버리는 불상사가 발생하곤 한다. 예를 들어 아래 코드처럼 작성했다고 치자.
Image.asset('assets/faker.jpeg', color: Colors.red,),그럼 우리는 이렇게 생각한다.
하지만 결과는 모두가 알 것이다. 그냥 빨간색 그 자체가 나올 뿐이라는 것을. 여기서 위 사진의 상상 속에 나오는 것처럼 이미지에 색을 조절하는, 정확히는 색 필터를 입힐 수 있게 하는 위젯이 있다. 그것이 바로 ColorFiltered 위젯이다.
이 ColorFiltered 위젯은 Flutter에서 자식 위젯에 색상 필터(ColorFilter)를 적용하여 시각적인 효과를 줄 수 있는 위젯이다. 주로 이미지나 위젯의 색상을 조정하거나 변형할 때 사용된다. 바로 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| colorFilter | ColorFilter | – | 자식 위젯에 적용할 색상 필터 객체 |
| child | Widget? | null | 색상 필터가 적용될 대상 자식 위젯 |
하위 속성으로는 정말 딱 우리가 필요한 colorFilter 값만 존재하고 있다. 우리는 흔히 ColorFilter 를 사용할 때 mode 를 붙여서 상수로 사용하는데 ColorFilter.mode 안에 있는 BlendMode 의 상수를 입력하는 것도 은근 일이다..
가장 기본적인 사용법이다.
ColorFiltered(
colorFilter: ColorFilter.mode(Colors.red, BlendMode.color),
child: Image.asset('assets/faker.jpeg'),
),그저 자신이 필터를 씌우고 싶은 사진에 ColorFiltered 위젯으로 감싼 후 colorFilter 에 값을 넣어주면 금방 된다.
여기서 색이 바뀌는 것은 BlenMode 의 의해 정해지게 된다.
BlendMode 는 말 그대로 어떠한 형식으로 색을 먹일지 설정하는 값인데 이게 또 굉장히 많아서 이 글에서 정리하기에는 무리가 조금 있다. 그래도 간단하게 알아보자.
먼저 사용한 사진의 원본은 이런 이미지다.
colorFilter: ColorFilter.mode(Colors.red, BlendMode.color), // BlendMode : colorcolor 로 설정해 놓으면 원본 이미지의 색조와 채도, 대상 이미지의 광도를 가져와서 색칠을 해준다.
colorFilter: ColorFilter.mode(Colors.red, BlendMode.difference), // BlendMode : differencedifference 로 설정해 주면 지정한 값에 따라 색상을 반전시켜 준다.
colorFilter: ColorFilter.mode(Colors.red, BlendMode.darken), // BlendMode : darken이름부터 알 수 있듯이 색상 채널에서 가장 낮은 값을 선택하여 어둡게 해주는 거다.
일단 여기까지만 알아보겠다. BlenMode 를 다 알아보기엔 29개나 있어서 다 알아보기엔 확실히 무리가 있는 듯하다. 암튼 도움이 되었길 바라며 마치겠다.
