Zenn
🕶️

Material3時代のFlutterダークモード【簡易】 2023春

2023/05/11に公開
Flutter
Material 3
tech

新規プロジェクトを立ち上げた状態から変更を加えます。

MaterialApp書き換え

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    colorSchemeSeed: Colors.green,
    useMaterial3: true,
    brightness: Brightness.light,
  ),
  darkTheme: ThemeData(
    colorSchemeSeed: Colors.green,
    useMaterial3: true,
    brightness: Brightness.dark,
  ),
  home: const MyHomePage(title: 'Flutter Demo Home Page'),
);

もともと新規作成時は
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)
が書かれています。これには brightness の設定も中に含まれています。
しかしライトモードとダークモードの違いを見やすくするために brightness を独立して指定したいです（私は）。そのために colorScheme を colorSchemeSeed にしました。

変更前

  • 色の設定いろいろ

がThemeDataのコンストラクタに渡される

変更後

  • colorSchemeSeed
  • useMaterial3 ON
  • brightness

という小さい情報がThemeDataのコンストラクタに渡される

AppBar書き換え

ダークモードなのにAppBarの広い面積を色が占めるのが嫌な場合は

return Scaffold(
  appBar: AppBar(
    //backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title),
  ),

と、もともとの文を削除することでAppBarの色をメインの背景と同じに出来ました。ただしライトモードでも同様の変更がされます。

動作確認環境

mac mini 2020 M1
Ventura 13.3.1
Flutter 3.10.0
Dart 3.0.0
Xcode 14.3
シミュレータ iOS16.4 iPhone14

Discussion