[Flutter] 색상, 스타일 등 체계적으로 관리하기

시중의 플러터의 기초 책들은 직접적으로 코드안에다가 색상이나, 스타일 등을 설정한다.

설명해야하는 범위를 줄이고 말하고자 하는 것에 집중하기 위해서 일 것이다.

 

하지만 앱의 페이지 수가 많아지거나 복잡해질수록 매번 사용하는 위젯에다가 직접적으로 색상과 스타일 등을 선언하는 것은

개발하거나 유지보수 측면에서 매우 불리하다.

 

색상이나 스타일 등을 관리하는 폴더 만든다. (theme 이나 size 등에 대한 파일도 만들 수 있다.)

디자이너가 있다면 디자인 시스템이 있을 것이고, 피그마 등으로 디자인이 만들어져 있을 것이다.

UI 개발 시에 미리 계속 활용될 부분들을 만들어 놓으면, UI 디자인보다 기능에 조금 더 집중해서 만들 수 있다.

 

(theme 이나 size 같은 파일도 만들지만, 현재 개발중엔 프로젝트엔 필요없어서 만들지 않았다.)

프로젝트의 크기 등에 따라 만들어지는 파일들이 달라지지만

Color, TextStyles 은 항상 만들어놓고 시작한다.

이유는 각 항목마다 설명하겠다.

 

파일을 저장할 폴더의 이름을 ui 로 할지 styles 로 할지 고민되는데,

깃허브에서는 styles 라는 이름을 더 많이 본 것 같다. 

/lib/ui/ColorStyles

ColorStyles

글자마다 색상이 있고, 버튼을 누를 때 땔 때, 입력필드가 선택되었을 때 등 다양한 경우가 있다.

색상의 코드는 외우기 힘들기 때문에 미리 정의해놓고 재활용한다.

위의 예시는 짧은 예시이다.

/lib/ui/TextStyles

TextStyles

글자마다 볼드체가 있기도 크기도 다르다.

TextStyles 같은 경우, 사용할 때마다 선언하면 코드의 양이 많아 읽기 불편하기 때문에 미리 정의해놓고 재활용해서 사용한다.