[Flutter Layout] 2. 플러터 Themes, 다크모드, 앱의 컬러 선택 사이트

지난 포스트에서 만든 레이아웃을 베이스로 Themes와 Colors에 대해 알아보도록 하겠습니다. 그리고 앱의 컬러를 쉽게 선택할 수 있게 도와주는 사이트를 알아봅시다.

 

이번 포스트는 다음 내용을 다루고 있습니다.

1. brightness, 다크 모드 설정
2. primarySwatch, 앱바 생상 변경
3. textTheme, 텍스트 스타일 일괄적으로 변경
4. Material Palette, 플러터 앱의 컬러 선택을 쉽게

---

현재 아래와 같은 앱을 구성하고 있습니다.

코드를 보면 앱에 대해서 어떤 색상도 설정하지 않았지만 화면에서는 파란색과 흰색 색상이 표현되고 있습니다. 이러한 앱의 테마를 쉽게 변경할 수 있습니다. MaterialApp 위젯에 테마를 설정해 보도록 하겠습니다.

 

MaterialApp 테마 설정

1. brightness , 다크모드 설정

MaterialApp 위젯의 theme 속성에서 ThemeData 위젯을 사용할 수 있습니다. ThemeData에서 가장 눈에 띄는 변화를 주는 속성은 Brightness입니다. 이곳에서 간단히 플러터 앱의 다크 모드 설정을 할 수 있습니다.

brightness속성에 Brightness.dark 를 넣어주었고 앱의 화면이 아래와 같이 바뀌었습니다.

코드 한줄로 다크 모드 표현이 가능한 게 매우 흥미롭습니다.

 

2. primarySwatch, Appbar생상 바꾸기

ThemeData에 설정할 수 있는 또 다른 기능은 primarySwatch입니다.

primarySwatch 속성을 Colors.blueGrey 설정하였고 아래와 같이 Appbar의 색상과 floatingActionButton 색생이 바뀌었습니다.

 

3. TextTheme, 텍스트 스타일 일괄 변경

theme에서 textTheme를 설정해 보겠습니다. textTheme을 설정하면 하위 위젯의 textStyle을 공통으로 적용시킬 수 있습니다.

위 코드에서 textTheme을 fontSize가 10이고 fontStyle이 FontStyle.italic인 TextStyle을 설정하였습니다. 물론 테마를 사용하는 대신 앱의 각 위젯에서 색상을 선택하고 텍스트 스타일도 지정할 수 있습니다. 실제로 예제에서 하위 위젯인 Text 위젯에서 TextStyle로 fontSize를 24를 주고 있는데 이렇게 하면 fontSize는 하위 위젯이 우선시되어 24로 할당되고 fontStyle은 theme에서 넣어준 italic으로 설정됩니다.

텍스트의 크기는 24, 폰트 스타일은 italic으로 지정되었네요.

 

theme 속성에 대해 간단히 알아보았습니다. 앱의 theme설정에 있어서 가장 고려해야 할 요소는 역시 생상인데요 어떻게 하면 앱의 생상을 큰 고민 없이 적절하게 선택할 수 있을까요? Material Palette 사이트를 이용하면 앱을 제작할 때 빠르게 테마의 컬러의 선정이 가능해집니다.

---

Material Palette

Material Palette 사이트는 앱에서 적절한 생상을 선택하게 도움을 주는 훌륭한 도구입니다.

https://www.materialpalette.com/

사이트에서는 즉시 색상을 확인해 볼 수 있고 플러터를 포함한 모든 시스템에서 사용할 수 있는 16진수 형식의 값도 제공해 줍니다.

두 가지 생상을 선택하면 아래와 같이 앱에서 사용될 색들이 자동으로 선택되어 추천해 줍니다.

플러터 앱뿐만 아니라 다른 웹사이트를 만들 때도 활용이 가능합니다.

---

여기까지 수고하셨습니다.  다음 포스트는 레이아웃에서 빼놓을 수 없는 Container위젯에 대해 알아보도록 하겠습니다.