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

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

参考