[flutter] 앱 아이콘의 명도와 채도를 변경하여 다양한 색상 표현하는 방법

22 Dec 2023

flutter

1. 아이콘 컬러 조정

먼저, ColorFiltered 위젯을 사용하여 아이콘의 명도와 채도를 조정할 수 있습니다.

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.green, BlendMode.hue), // 변경하고 싶은 색상과 블렌드 모드 설정
  child: Icon(Icons.star), // 대상 아이콘
)

위 예시에서는 ColorFiltered 위젯을 사용하여 Icons.star를 초록색으로 변경했습니다. BlendMode와 조합하여 아이콘의 색상을 조정하는 것이 가능합니다.

2. 이미지 필터링

또한, 이미지 필터링을 통해 더 다양한 색상 표현을 시도할 수 있습니다. dart:ui 패키지에서 제공하는 ColorFilter.matrix를 사용하여 이미지의 명도와 채도를 변경할 수 있습니다.

import 'dart:ui';

ColorFilter colorFilter = ColorFilter.matrix(<double>[
  0.2126, 0.7152, 0.0722, 0, 0, // Red
  0.2126, 0.7152, 0.0722, 0, 0, // Green
  0.2126, 0.7152, 0.0722, 0, 0, // Blue
  0,      0,      0,      1, 0, // Alpha
]);

ImageFiltered(
  imageFilter: ImageFilter.colorFilter(colorFilter), // 필터 적용
  child: Icon(Icons.star), // 대상 아이콘
)

위 예시에서는 ColorFilter.matrix를 사용하여 명도와 채도가 조정된 아이콘을 만들었습니다.

Flutter를 사용하면 앱 아이콘에 다양한 색상 표현을 쉽게 적용할 수 있습니다. 이러한 방법을 사용하여 앱 아이콘의 색상을 변경하고 사용자들에게 더 다채로운 경험을 제공할 수 있습니다.