変化が激しいFlutter3でダークテーマ対応するのにハマった...

最近個人でFlutterを使用しています。簡単にマルチプラットフォームでビルドできるのはとても便利ですよね。
しかし、その反面とても変化が激しくネットに転がっている記事がすぐに古くなってしまいます...。

そんなFlutterくんでダークテーマに対応させる際に地味につまづいたことがあったので共有します。

動作環境

• macOS(Monterey 12.3)

> flutter --version
Flutter 3.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 796c8ef792 (5 weeks ago) • 2023-06-13 15:51:02 -0700
Engine • revision 45f6e00911
Tools • Dart 3.0.5 • DevTools 2.23.1

ちなみにmacOS用アプリとしてビルドした時の出来事です。

本題

ここから詰まった内容を順に記述していきます。

問題１： app bar真っ白問題

ダークテーマを設定するべく、ネットの記事を参考に以下のように記述しました
参考: https://cbtdev.net/flutter-darkmode/

// ~前略~

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      darkTheme: ThemeData.dark(), // ダークテーマ追記

      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ~後略~

するとシミュレータが以下のようになりました

app barの部分が真っ白になってしまっておかしいですね。
調べてみるとどうやらmaterial3を有効化する必要があるようです。

というわけでmaterial3を有効化してみます。

// ~前略~

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      darkTheme: ThemeData.dark(useMaterial3: true), // material3有効化

      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ~後略~

試してみると以下のようになります。

とりあえずapp barが真っ白問題は解決ですね。

「お、いい感じじゃないの〜♪」

そう思ったのも束の間。上記のコードだとダークテーマ時の色を変更することができません。
darkメソッドはstaticメソッドのようで、しかも引数はuseMaterial3しかありません...

問題2： ダークテーマ時の色変えられない問題

仕方がないので別の記事を参考にdarkメソッドは使わずに直接インスタンス化してみます
参考: https://pc.gajeroll.com/programming/flutter/flutter-material3-theme/

// 前略

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

// 後略

すると以下の様なエラーが発生します

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building MyApp(dirty):
'package:flutter/src/material/theme_data.dart': Failed assertion: line 459 pos 12:
'colorScheme?.brightness == null || brightness == null || colorScheme!.brightness == brightness': is
not true.

「え〜😭」
そう言いたい気持ちをグッと堪えつつ調べてみると以下の様な質問を見つけました。
参考: https://stackoverflow.com/questions/71069904/getting-failed-assertion-with-setting-brightness-brightness-dark-for-darktheme
どうやらバージョンアップして仕様が変わったみたいですね。

質問の回答にある様に、直接ThemeDataのbrightnessを変更せずColorSchemeを変更します。

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark, // 追記
        ),
        useMaterial3: true,
      ),

      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

結果は以下の通りです。

正常に表示されてますね！
色も紫から青に変更できているので問題なさそうです。

まとめ

以上でこの記事を締めさせていただきます。
Flutterは変化が激しくこの記事もすぐに古い情報になってしまうでしょう。その時は遠慮なく「この記事古いで！」とコメントしてください。
この記事を見た人が混乱しない様に...