[Flutter] Flutter에서 Hex값을 사용해 색상 설정 방법

안녕하세요, 황대성입니다!

 

이번 포스팅에서는 Flutter에서 제공하는 Colors에 있는 색상이 아닌,

개발자가 원하는 색상 (Hex, RGB...)을 사용하는 방법에 대해 포스팅해보려고 합니다!

 

엄청 쉬울 것 같지만 제가 개발하면서 막혔던 부분이었기에,

저와 같으신 분들이 조금이라도 더 도움이 되었으면 하여 글을 작성합니다!!

---

Flutter에서 색상을 지정하는 다양한 방법들이 있습니다.

// 가장 기본적인, Colors를 사용하는 방법
color: Colors.red;

// ARGB 혹은 RGBO를 사용하는 방법
color: const Color.fromARGB();

color: const Color.fromRGBO();

// Hex값을 정수로 바꾸어 사용하는 방법
color: const Color(0xffb74093);

대표적으로 위 네 가지가 있습니다!

 

이번 글에서 저는 대부분의 디자이너분께서 많이 사용하시는 Hex값을 이용하여 색상을 설정하는 방법을 다루려고 합니다.

 

Flutter에서 Color 클래스는 정수만 매개변수로 받기에,

문자열인 Hex를 정수로 바꾸어 주기만 하면 사용 가능합니다!

 

또한 정수로 바꾸는 과정에서, 불투명도를 항상 지정해주어야합니다!

 

전체 불투명도는 255이므로, 이를 16진수로 바꾸면 FF입니다.

 

즉, 불투명도를 지정해준 0xff뒤에 여러분이 사용하시고 싶은 Hex값을 붙이면 끝입니다!

 

예) 만약 #3195f7을 바꾸고 싶다면?

불투명도를 지정해주는 0xff뒤에 Hex값을 붙이면 됩니다!

즉, 0xff3195f7이 되는것입니다!

정말 쉽죠?

 

이렇게 나온 값을 Color() 안에 넣어서 사용만 하시면 됩니다!

---

제가 처음 봤을 때 당황해서 우왕자왕한 경험이 있어서 이번 글을 포스팅했습니다.

 

Flutter 초보분들이 이 글을 읽으시고 많은 도움이 되었으면 좋겠습니다!

 

우리 같이 Flutter 열심히 공부해봐요! ㅎㅎ

 

오늘도 긴 글 읽어주셔서 감사합니다!

---

참고한 사이트

 

How do I use hexadecimal color strings in Flutter?

How do I use hexadecimal color strings in Flutter?