[Flutter] 6. Flutter Theme

여러 위젯 또는 앱 전체에 걸친 속성을 정의하고 싶을 때

no	이전 시리즈
1	Flutter 개발 환경 준비
2	Hello, Flutter
3	Flutter UI - Hot Reload, Basic widgets
4	Flutter UI - 폰트 추가, 위젯
5	Flutter StatefulWidget & Dart 101(함수, 변수)

참조

테마 적용 cookbook
ThemeData class API 문서
TextTheme class API 문서

앱 전체에 테마 적용하기

MaterialApp 위젯에 있는 theme 프로퍼티를 이용합니다.

ThemeData 위젯을 사용합니다.

MaterialApp(
  title: title,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
    
    // Define the default font family.
    fontFamily: 'Montserrat',
    
    // Define the default TextTheme. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: TextTheme(
      headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  )
);

앱 일부에 테마 적용하기

ThemeData 를 직접 만들기

Theme(
  // Create a unique theme with "ThemeData"
  data: ThemeData(
    accentColor: Colors.yellow,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

상위 노드 테마를 확장하기

위젯 트리에서 상위 노드에 있는 위젯의 테마를 사용합니다.

Theme.of(context) 메소드는 위젯 트리 를 따라 올라가면서 가장 가까운 테마를 이용하게 됩니다.

별도의 위젯 테마를 발견하지 못하면 앱의 테마를 사용합니다.

copyWith() 메소드를 사용합니다.

Theme(
  // Find and extend the parent theme using "copyWith". See the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);

테마 사용하기

테마를 사용할 때는 위젯의 Theme.of(context) 메소드를 이용합니다.

다음은 테마의 accentColor를 이용하는 방법입니다.

Container(
  color: Theme.of(context).accentColor,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.title,
  ),
);

기타 속성들

primaryColor : 앱의 기본 색상

accentColor : 앱의 포인트 색상

scaffoldBackgroundColor : scaffold에 배경 색 추가

TextTheme

ThemeData 의 앱의 기본 텍스트 테마를 지정하는 속성, TextTheme 클래스를 사용합니다.
ThemeData와 마찬가지로 Theme.of 를 이용해서 상위 TextTheme을 가져올 수 있습니다.

직접 정의하거나 Typography.black, Typography.white 같은 인스턴스를 사용할 수 있습니다.
TextTheme의 생성자입니다.
TextTheme({TextStyle display4, TextStyle display3, TextStyle display2, TextStyle display1, TextStyle headline, TextStyle title, TextStyle subhead, TextStyle body2, TextStyle body1, TextStyle caption, TextStyle button, TextStyle subtitle, TextStyle overline })
TextTheme의 기본값은 아래와 같은 2014년판 머테리얼 디자인 스펙을 따르고 있습니다.

NAME	SIZE	WEIGHT	SPACING	2018 NAME
display4	112.0	thin	0.0	headline1
display3	56.0	normal	0.0	headline2
display2	45.0	normal	0.0	headline3
display1	34.0	normal	0.0	headline4
headline	24.0	normal	0.0	headline5
title	20.0	medium	0.0	headline6
subhead	16.0	normal	0.0	subtitle1
body2	14.0	medium	0.0	body1
body1	14.0	normal	0.0	body2
caption	12.0	normal	0.0	caption
button	14.0	medium	0.0	button
subtitle	14.0	medium	0.0	subtitle2
overline	10.0	normal	0.0	overline

일반적인 Text 위젯에는 body1 속성이 사용됩니다.