[Flutter] 06. Flutter Theme

• Theme 관련 코드는 실무 시 따로 디렉토리 만들어서 관리하는 것이 유지 보수에 좋다

theme

---

1. ThemeData

    : Material Design Theme에 대한 색상 및 Typography 값을 정의하고 보유하는 클래스

• colorScheme 
  • 앱의 전반적인 색의 theme을 정해 간편하게 디자인 가능 
  • 간편한 방식 2가지  
    • ColorScheme.light() or .dark()
    • ColorScheme.fromSeed ( ... )
• textScheme
  • 앱 전반적으로 사용할 수 있는 다양한 스타일의 텍스를 캡슐화하는 인터페이스
  • bodyMedium, Large 등 정의해놓고 이후에 Text Widget에서 style에서 선언해 사용 가능
• useMaterial3
  • useMaterial3: true
    • 앱이 Material3로 디자인된다

 

---

2. ColorScheme.light( ... ) or dark (... )

// theme.dart

final customTheme = ThemeData(
  colorScheme: const ColorScheme.light(
    primary: Colors.indigo,
    secondary: Colors.green,
    tertiary: Colors.yellow,
  ),
  textTheme: const TextTheme(
    bodyMedium: TextStyle(fontWeight: FontWeight.normal, fontSize: 30),
  ),
);

 

• primary 
  • theme의 원색을 indigo로 설정 
  • primary에 선언된 색은 앱의 화면과 구성요소에서 자주 사용됨
• secondary
  • theme의 보조 색상을 green으로 설정
  • secondary에 선언된 색은 UI의 일부를 강조
• tertiary
  • theme의 3차 색상을 yellow로 설정
• 현재 Material 2 Design을 따르고 있음

 

---

3. ColorScheme.fromSeed( ... )

// theme.dart

final customTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  textTheme: const TextTheme(
    bodyLarge: TextStyle(fontWeight: FontWeight.normal, fontSize: 30),
  ),
  useMaterial3: true,
);

Material3 design

• fromSeed 
  • 단일 시드 색상에서 대비되는 색상 쌍의 전체 세트를 생성
  • 변수로 넣은 seedColor로 표면, 배경, 오류 등 기본 및 보조 색상 생성하는데 사용된다
• 현재 이 사진은 Material 3 Desgin으로 설정

---

4. textTheme

@override
  Widget build(BuildContext context) {
    // 위에서 설정한 bodyLarge를 가져오려면 theme data를 가져와야함
    // final textTheme = Theme.of(context).textTheme;
    final textTheme = customTheme.textTheme;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Theme'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Press Count', style: textTheme.bodyMedium,),
            Text('$count', style: textTheme.displayLarge,),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => count++),
      ),
    );
  }

• theme.dart 파일에서 정의한 textTheme를 가져오려면 변수로 선언해서 사용해야함
• 만약 main.dart 파일에서 theme를 정의한 경우, 위 코드에서 주석처리된 부분처럼
  • final textTheme = Theme.of(context).textTheme;
  • 이렇게 변수 선언한 후 
  • Text Widget의 style 선언 시 사용하면 된다

---

5. AppBarTheme

• appBar만 따로 theme를 디자인할 수 있음
• backgroundColor를 선언해 앱 바만 색을 변경할 수 있음