Flutter3でMaterial3とdark modeを同時に使う

こんにちは。趣味グラマのNobu(@nm_aru)です。

先日、Flutter3と一緒にMaterial3への対応も発表されました。

Material3を使うには、Flutterのバージョンを3に上げるだけでは駄目で、ThemeDataのパラメータで指定してあげる必要があります。

私の場合は、ThemeDataでlight()やdark()を使っていたのですが、Material3と同時に使う方法が一瞬分からず悩んだので、備忘録として残しておきます。

Material3を使うにはuseMaterial3: trueを指定するだけ

app.dart

// Flutter2でlight()とdark()を使っているパターン
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system
      home: MyApp()
    );
  }
}

// Flutter3でMaterial3とlight、darkを一緒に使うパターン
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true, brightness: Brightness.light),
      darkTheme: ThemeData(useMaterial3: true, brightness: Brightness.dark),
      themeMode: ThemeMode.system
      home: MyApp()
    );
  }
}

ドキュメントを見れば分かりますが、light()やdark()はコンストラクタで、結局中でbrightnessを指定してるだけでした。