[Flutter] 색상(Color) 설정 방법 정리

huny·2023년 8월 23일
0

flutter

목록 보기
7/18
post-thumbnail

Flutter에서 색상을 설정하는 방법은 대표적으로 아래와 같다.

  1. Colors 를 활용하여 지정된 색상 불러오기
    color: Colors.amber;
    color: Colors.amber[300];
  1. RGBO, ARGB 형식으로 불러오기
    color: const Color.fromRGBO();
    color: const Color.fromARGB();
  1. Hex값을 정수로 변환하여 불러오기
    color: const Color(0xff335577);

1번 방법을 쓰면 미리 만들어진 다양한 컬러 값을 불러올 수 있다.
간편하게 파랑, 빨강 등의 색을 쓰고싶을 때 활용하면 된다.
그리고 Colors.amber[숫자] 등의 옵션으로 색의 강도를 설정할 수 있다.

2번째 방식중 첫번째는 RGB(Red, Green, Blue) 와 O(Opacity)를 쓰는 방식이다.
RGB는 0~255 범위의 값으로 표현한다.
Opacity투명도를 의미한다. 0은 투명, 1은 완전 불투명을 의미한다.
즉 0.5 로 설정하면 반쯤 불투명한 색을 확인할 수 있다.

두번째는 ARGB.
A는 Alpha. 이 속성 역시 투명도를 의미한다.
각각의 옵션은 0~255의 값 범위로 설정이 가능하다.

3번째 방식은 색상을 16진수로 표현하는 방식이다.
0x로 시작을 알리고 2자리씩 끊어서 투명도, R, G, B의 의미를 가지고 있다.
0~255를 16진수로 표현하면 00~ff 까지의 속성을 지니고 있다.

예시

0xffffffff는 완전 불투명한 하얀색을 의미한다.
0xff00ff00 은 완전 불투명한 초록색을 의미한다.
0x330000ff 는 투명도가 있는 파란색을 의미한다.

이를 활용하여 마음껏 색칠놀이(?)를 하도록 하자.

profile
재밌게 하고싶다.

0개의 댓글