[Flutter] Color Class 가벼운 사용법 정리

 

안녕하세요, 성조입니다.

오늘은 Flutter Color Class에 대해 간략하게 다뤄보는 시간을 가지려 해요.

---

Color Class란?

Color Class는 ARGB 포맷을 사용하는 불변(Immutable)의 색상 값을 나타낸다. 머터리얼 디자인 사양에 정의된 기본 색상을 제공하는 Colors 클래스와 달리, Color 클래스는 개발자가 직접 세밀하게 색상으리 정의하고 조작할 때 사용하는 방법이다.

Colors 클래스와 헷갈리지 않는 것이 중요하다.

 

 

Color 객체 생성 방법(Constructors)

// 1. Hex 값으로 생성 (가장 흔함, 반드시 0x 뒤에 8자리 입력)
const Color c1 = Color(0xFF42A5F5);

// 2. ARGB 정수 값으로 생성 (Alpha, Red, Green, Blue)
const Color c2 = Color.fromARGB(255, 66, 165, 245);
const Color c3 = Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);

// 3. RGBO (Red, Green, Blue, Opacity) - CSS의 rgba()와 유사
const Color c4 = Color.fromRGBO(66, 165, 245, 1.0);

// 4. 부동소수점(double) 채널 값으로 생성 (0.0 ~ 1.0)
const Color c5 = Color.from(alpha: 1.0, red: 0.2588, green: 0.6471, blue: 0.9608);

1) 기본 8비트 정수형(int)과 부동소수점 (double) 두 가지 형태로 접근이 가능하며, 부동소수점 같은 경우 투명도를 조절하는데 사용할 수 있게 된다.

2) 디자인 시스템으로 하나의 컬러들을 모두 통일 관리할 수 있도록 폴더와 레이어를 구분할 수 있다면 충분히 좋은 장점으로 쌓을 수 있지만, 개별 구현들이 진행되는 과정에서 확인을 위해서는 CSS와 비슷한 Color.fromRGBO 를 활용해서 사용할 수 있다.

3) 헥사 코드를 사용할 때는 FF를 덧붙여서 8자리로 맞춰 사용해야 한다.

4) 배경색에 따른 텍스트 색상 반전 등 동적인 UI를 구현할 때는 'computeLuminance' 클래스로 밝기를 계산하여 필요한 값을 구현해준다.

5) 'withAlpha(), withRed(), withGreen(), withBlue(), withValues()'메서드들을 활용해서 진행할 수 있는데 빨강 초록 파랑 채널 덮어씌기 또는 withOpacity 같이 투명도 설정 등을 찾아서 조정할 수 있다.

 

[참조 링크]

https://api.flutter.dev/flutter/dart-ui/Color/computeLuminance.html

computeLuminance method - Color class - dart:ui library - Dart API

 

 

 

 

Flutter Color 객체에서 색상이 안나오는 경우 case

// 잘못된 예: 앞 2자리가 00으로 인식되어 완전 투명해짐 (안 보임)
const Color c1 = Color(0xFFFFFF); 

// 올바른 예: FF(완전 불투명)를 앞에 붙여야 함 (보임)
const Color c2 = Color(0xFFFFFFFF);

Flutter에 Error 또는 버그 사항으로 볼 수 있는 이 현상을 다뤄본다.

Color 객체를 생성했는데 화면에 아무것도 렌더링되지 않는 경우가 있는데 Color Class는 8자리 헥사데시멀(Hex) 코드 구조로 입력해야 하는데 원하는 컬러를 위해 6자리만 원하는 입력하는 문제가 발생된 부분이기 때문에 이런 에러가 발생된다.

 

플러터의 컬러 클래스는 RGB 값만 입력하는 것이 아닌 ARGB(Alpha + RGB)를 사용하여 반영해야 한다.

 

 

---

- 참조 자료 -

https://api.flutter.dev/flutter/dart-ui/Color-class.html

Color class - dart:ui library - Dart API

 

다음 포스트에서 뵙겠습니다.

감사합니다.