[Flutter] Flutter에서 Hex값을 사용해 색상을 설정하려면?

 

안녕하세요 뿔테 안경의 플러터이야기입니다. 늘 Ui 디자인을 할 때 flutter material에 한정적인 색상 때문에 한정적인 디자인을 할 수밖에 없었는데요. 이번에 Hex값을 이용해 색상을 지정할 수 있는 방법을 우연히 알게 되어 공유하고자 합니다.

Flutter에서 Color의 클래스는 오직 정수만 변수로 받기때문에 문자열인 Hex의 값을 정수로 바꿔준다면 사용이 가능합니다. 그 과정에서 불투명도를 꼭 지정해주셔야 하는데요. 불투명도를 16진수로 변환한다면 ff이고 0xff뒤에 Hex값을 붙이면 사용이 가능합니다.

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

class Palette{
  static const backgroundColor = Color(0xff2f4550);
  static const bottomAppBar = Color(0xfff4edea);
  static const bottomIcon = Color(0xfff4f4f9);
}

저는 재사용성을 향상시키기 위해 클래스를 만들어 구성했습니다. 주의하실 점은 painting.dart를 import 하셔야 합니다.

 

도움이 되셨다면 좋겠습니다. 감사합니다.