【Flutter】ユーザーインターフェースのカスタマイズ

[chatGPT に立ててもらったスケジュール](ceecf4a987d3f75b6d93)に準じてユーザーインターフェースのカスタマイズを勉強。
> - Day 4: ユーザーインターフェースのカスタマイズ
>    - テーマのカスタマイズ方法を学ぶ
>    - ウィジェットのスタイルとデザインのカスタマイズ方法を学ぶ
# テーマのカスタマイズ方法
- Flutterでは、ThemeDataを使用してアプリケーションのテーマを定義する。
- ThemeData class で定義できるのは色`colorScheme`とフォント`textTheme`
## colorScheme
たくさんあったので別にまとめた。明日公開予定。
<!-- たくさんあったので[別にまとめた](59340e5609d1d84497e8)。 -->
### ColorScheme.fromSeed
初期のコードにある`ColorScheme.fromSeed`は指定した`seedColor`からパレットを生成していいかんじにしてくれるらしい。
``` dart
theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        useMaterial3: true,
)
```
### ColorScheme.light
ライトモードの色を指定できる
``` dart 
theme: ThemeData(
  colorScheme: ColorScheme.light( 
    primary: Colors.blue,
    secondary: Colors.green,
    // 他のプロパティも設定可能
  ),
),
```
### ColorScheme.dark
ダークモードの色を指定できる
``` dart 
theme: ThemeData(
  colorScheme: ColorScheme.dark(
    primary: Colors.red,
    secondary: Colors.yellow,
    // 他のプロパティも設定可能
  ),
),
```
## textTheme
仕様は2021年から大幅に変更されているらしい。下記の図は公式にあったもの。
でも試したら2018年の仕様も使えた。いつか使えなくなる日はくるのかな・・・
![公式 TextTheme プロパティの名前](https://lh3.googleusercontent.com/Yvngs5mQSjXa_9T4X3JDucO62c5hdZHPDa7qeRH6DsJQvGr_q7EBrTkhkPiQd9OeR1v_Uk38Cjd9nUpP3nevDyHpKWuXSfQ1Gq78bOnBN7sr=s0)
### themeに記述
``` dart
theme: ThemeData(
  textTheme: TextTheme(
    displayLarge: TextStyle(fontSize: 120),
  ),
),
```
### textThemeで使えるプロパティ
2018の仕様と2021の仕様で大きく変わったらしい。
以下はchatGPTに出力してもらった表。
headline1などの2018仕様も試したら使えた。そのうち使えなくなる？？
| プロパティ         | フォントサイズ | フォントウェイト |
| ------------------ | ------------- | ---------------- |
| `displayLarge`     | 112.0         | `w300`           |
| `displayMedium`    | 45.0          | `w400`           |
| `displaySmall`     | 34.0          | `w400`           |
| `headlineLarge`    | 34.0          | `w400`           |
| `headlineMedium`   | 24.0          | `w500`           |
| `headlineSmall`    | 20.0          | `w600`           |
| `titleLarge`       | 20.0          | `w500`           |
| `titleMedium`      | 18.0          | `w500`           |
| `titleSmall`       | 16.0          | `w600`           |
| `bodyLarge`        | 16.0          | `w400`           |
| `bodyMedium`       | 14.0          | `w400`           |
| `bodySmall`        | 12.0          | `w400`           |
| `labelLarge`       | 14.0          | `w500`           |
| `labelMedium`      | 12.0          | `w500`           |
| `labelSmall`       | 10.0          | `w400`           |
# ウィジェットのスタイルとデザインのカスタマイズ方法
- ThemeData classで定義したものは`style: Theme.of(context).textTheme.titleLarge,`や`color: Theme.of(context).ColorScheme.primary,`のように`Theme.of(context)`で呼び出すことができる。
## colorScheme
``` dart
Container(
  width: 40,
  height: 40,
  color: Theme.of(context).colorScheme.secondary, // primary にするとprimaryが反映される〜！
),
```
## textTheme
以下 例として実行してみると楽しい
``` dart
child: Column(children: [
  Text("displayLarge", style: Theme.of(context).textTheme.displayLarge),
  Text("displayMedium", style: Theme.of(context).textTheme.displayMedium),
  Text("displaySmall", style: Theme.of(context).textTheme.displaySmall),
  Text("headlineLarge", style: Theme.of(context).textTheme.headlineLarge),
  Text("headlineMedium", style: Theme.of(context).textTheme.headlineMedium),
  Text("headlineSmall", style: Theme.of(context).textTheme.headlineSmall),
  Text("titleLarge", style: Theme.of(context).textTheme.titleLarge),
  Text("titleMedium", style: Theme.of(context).textTheme.titleMedium),
  Text("titleSmall", style: Theme.of(context).textTheme.titleSmall),
  Text("bodyLarge", style: Theme.of(context).textTheme.bodyLarge),
  Text("bodyMedium", style: Theme.of(context).textTheme.bodyMedium),
  Text("bodySmall", style: Theme.of(context).textTheme.bodySmall),
  Text("labelLarge", style: Theme.of(context).textTheme.labelLarge),
  Text("labelMedium", style: Theme.of(context).textTheme.labelMedium),
  Text("labelSmall", style: Theme.of(context).textTheme.labelSmall),
])
```
# 参考

https://api.flutter.dev/flutter/material/Theme-class.html

https://zenn.dev/t_fukuyama/articles/ea5a424433f2ff

https://docs.flutter.dev/cookbook/design/themes