chatGPT に立ててもらったスケジュールに準じてユーザーインターフェースのカスタマイズを勉強。
- Day 4: ユーザーインターフェースのカスタマイズ
- テーマのカスタマイズ方法を学ぶ
- ウィジェットのスタイルとデザインのカスタマイズ方法を学ぶ
テーマのカスタマイズ方法
- Flutterでは、ThemeDataを使用してアプリケーションのテーマを定義する。
- ThemeData class で定義できるのは色
colorSchemeとフォントtextTheme
colorScheme
たくさんあったので別にまとめた。明日公開予定。
ColorScheme.fromSeed
初期のコードにあるColorScheme.fromSeedは指定したseedColorからパレットを生成していいかんじにしてくれるらしい。
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
)
ColorScheme.light
ライトモードの色を指定できる
theme: ThemeData(
colorScheme: ColorScheme.light(
primary: Colors.blue,
secondary: Colors.green,
// 他のプロパティも設定可能
),
),
ColorScheme.dark
ダークモードの色を指定できる
theme: ThemeData(
colorScheme: ColorScheme.dark(
primary: Colors.red,
secondary: Colors.yellow,
// 他のプロパティも設定可能
),
),
textTheme
仕様は2021年から大幅に変更されているらしい。下記の図は公式にあったもの。
でも試したら2018年の仕様も使えた。いつか使えなくなる日はくるのかな・・・
themeに記述
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
Container(
width: 40,
height: 40,
color: Theme.of(context).colorScheme.secondary, // primary にするとprimaryが反映される〜！
),
textTheme
以下 例として実行してみると楽しい
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),
])
参考