Dev Day

이미지 출처 : https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9F%AC%ED%84%B0

Flutter에서 Color 설정 방법

Flutter로 앱을 만들다 보니 Colors 위젯에서 제공하는 색상들이 아닌 다른 색들은 사용할 방법이 없는지 찾아보다가 글을 쓰게 되었습니다.

앱을 꾸미기 시작하면서 색상에 대한 고민을 많이 하게 되었는데 Colors 위젯에서 제공하는 컬러는 많이 한정적이어서 다른 색을 사용하려면 어떻게 해야하나 찾아보게 되었습니다.

 

Colors Widget

일단 기본적으로는 Colors 위젯을 사용하여 색을 설정할 수 있습니다.

import 'package:flutter/material.dart';

class ColorTest extends StatelessWidget {
  const ColorTest({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Test'),
      ),
      body: Container(
        child: Text(
          'Colors Widget',
          style: TextStyle(
            color: Colors.blue
          ),
        ),
      ),
    );
  }
}

위 코드와 같이 Colors.blue 등으로 Colors.색상 으로 텍스트에 색을 입힐 수 있습니다.

하지만 Colors 위젯에 있는 색은 너무 부족하더군요.

 

Color Widget

Color 위젯을 사용하면 여러가지 색 표현이 가능합니다.

Color 위젯은 Hex 코드를 사용하여 색 표현이 가능합니다.

Hex 코드란 나무위키에서 아래와 같이 정의하고 있습니다.

이미지 출처 : https://namu.wiki/w/%ED%97%A5%EC%8A%A4%20%EC%BD%94%EB%93%9C

RGB 방식 색상 코드 표기법이다.
#과 뒤에 붙는 여섯 자리 또는 세 자리의 숫자로 색상을 표기하는 방식이다.
여섯 자리인 경우는 두 자리씩 끊어서 각각 Red, Green, Blue의 강도를 256(=162)단계에 걸쳐 나타낸 것이며,
각 두 자리수는 16진수이므로 00(=010)일 때 가장 어둡고 FF(=25510)일 때 가장 밝다.
중간값은 80(=12810)이다.
세자리인 경우는 한자리씩 끊어서 역시 'Red', 'Green', 'Blue' 이며 각 색상의 강도를 16단계씩 나타낸다.
여덟 자리 또는 네 자리로도 나타낼 수 있는데, 이 경우 각각 뒤에 추가되는 두 자리 또는 한 자리는 알파값 즉 투명도를 의미한다. 00 또는 0일 때 완전히 투명해지고, FF 또는 F일때 불투명해진다.

 

만약 기본적인 흰색의 #FFFFFF를 Hex 코드를 이용하여 사용하고 싶다면 아래와 같이 하시면 됩니다.

import 'package:flutter/material.dart';

class ColorTest extends StatelessWidget {
  const ColorTest({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Test'),
      ),
      body: Container(
        child: Text(
          'Colors Widget',
          style: TextStyle(
            color: Color(0xffFFFFFF)
          ),
        ),
      ),
    );
  }
}

Hex 코드 사용 방법은 Color(0xffHexCode) 입니다.

원하시는 색상에 0xff뒤에 Hex 코드를 넣어서 사용하시면 됩니다.

그 외에도 Color.fromARGB(), Color.fromRGBO() 등으로 사용이 가능합니다.

 

Flutter를 잘 아시는 개발자분들은 이미 알고 계시는 내용일 수 있습니다만, 저같은 Flutter를 처음 접하고 개발하는 주니어 개발자의 경우 유용한 내용이 아닐까 싶습니다.ㅎㅎ

 

앞으로도 저와 같은 Flutter 초보들에게 유용한 내용을 찾아 글을 작성하도록 하겠습니다.

혹시나 틀린 부분이 있다면 댓글로 남겨주세요!