Zenn
Open2

[Flutter] ThemeDataとかColorSchemeについて

Flutter
マテリアルデザイン
theme
darkmode
colorscheme
PhanpyPhanpy

やりたいこと

  1. アプリ全体のテーマカラー（seed color）を任意で設定したい
  2. ライトテーマとダークテーマでseed colorに応じた適切な色を表示させたい
PhanpyPhanpy

実装

1. MaterialAppにthemeとdarkThemeを設定

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const Color _seedColor = Color(0x00c53d43); // 好きな色を記述

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData( // ライトテーマ用の記述
        brightness: Brightness.light,
        colorSchemeSeed: _seedColor,
      ),
      darkTheme: ThemeData( // ダークテーマ用の記述
        brightness: Brightness.dark,
        colorSchemeSeed: _seedColor,
      ),
      home: HomePage(title: 'Home'),
    );
  }
}

2. ウィジェットのcolor等にTheme.of(context).colorScheme.<color>を指定

Container(
  width: 24,
  height: 24,
  color: Theme.of(context).colorScheme.surfaceVariant, // ここ！
),
  • これだけでライトテーマかダークテーマに応じていい感じに色を表示してくれるようです。
  • どのような色にするか（上記コードのsurfaceVariantに相当するところとして、何を指定すればよいか）目星をつけるには、こちらのツールが大変有用です。