テーマのカスタマイズ方法

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),
])

参考