이벤트에 반응하여 Stateless 위젯 아이콘 이미지 색 바꾸기

 

1. 네비게이션 탭바를 Stateful 위젯으로 만들어 탭할시 파란색 아이콘 이미지로 바꿀 수 있었으나
2. 가급적 Stateless 위젯을 사용하여 최적화 시키고 싶었다.
3. Statless 위젯을 사용하면서 이미지의 색을 바꾸는 방법에 대해 알아보자.

---

배경 지식

참고링크: https://api.flutter.dev/flutter/dart-ui/BlendMode.html

 

Flutter의 UI렌더링 과정 이해하기

 

Flutter의 UI렌더링 과정은 아래와 같다

1. 개발자가 작성한 코드를 통해 위젯 트리가 생성된다.
2. 위젯 트리가 빌드된 후, Flutter는 상태와 위젯트리 생명주기를 관리하는 Element Tree, 그리고 위젯의 위치와 크기 정보를 가지고 있는 Render Tree를 만든다.
3. 상위위젯부터 하위위젯까지 제약조건이 잡히고, 다시 하위부터 상위까지 사이즈가 결정되어 레이아웃이 잡히면 Render Widget에서는 paint 단계를 진행하면서 레이아웃이 잡힌 위젯의 내부 구현을 채우게 된다.
4. Paint phase 는 상위부터 하위로 진행되며 각 위젯의 그래픽 내용을 Canvas에 그리게 된다.
5. 페인트 단계가 끝나면 다음으로는 Compositioning phase 로 넘어간다. 여기서는 만들어진 레이어들이 합쳐저 최종이미지를 생성하게되는데, 이곳에서 Blend Mode가 적용된다.

 

ColorFiltered 와 BlendMode 이해하기

• BlendMode 타입은 Compositioning Phase에서 두 가지 객체가 어떻게 혼합되는지 결정하는 방법을 enum으로 나열해둔 타입이다.
• 여기서 두가지 객체란 Source Object와 Destination Object로 전자는 새로그리려는 그래픽 요소, 후자는 이미 캔버스에 존재하는 그래픽요소이다.
• BlendMode의 enum 에 정의된 방법을 하나 선택하여 두 객체를 어떻게 결합해서 UI를 보여줄 것인지 개발자가 정의할 수 있다.
• 예를들어 BlendMode.multiply를 선택하면 두 객체의 색상을 곱하여 더 어두운 색상을 생성한다. 결과적으로 두 사각형이 겹치는 영역은 더 어두운 색상으로 나타난다.
• 이러한 BlendMode 타입은 ColorFiltered 클래스 내부에 선언되어있다. 따라서 ColorFiltered 클래스를 통해 위젯에 다양한 필터효과를 적용시킬 수 있다.

 

문제 해결

• Colorfiltered 클래스를 통해 BlendMode enum타입에 접근하여 srcIn 을 설정해준다.
• srcIn를 채택하게되면, 두 이미지가 겹치는 부분에서만 Source Object를 보여주는 역할을 한다.
• 여기서 Destination Object는 렌더링되지 않고 단순히 마스크로 취급된다.
• 대상 이미지의 색상 채널은 무시되고 오직 불투명도(opacity)만 영향을 미치는 효과를 얻을 수 있다.