どうも、たくチャレ(@takuchalle)です。

以前、provider を使って超簡単にダークモードに対応する方法を紹介しました。 これはアプリ内でライトモード・ダークモードを切り替える方法でした。

今回紹介する方法は、iOS/AndroidなどOSの設定によってFlutterアプリのライトモード・ダークモードを切り替える方法を紹介します。

といってもFlutterが標準でダークモードをサポートしているのでめちゃめちゃ簡単に対応することができます。

Flutterのダークモード対応

FlutterMaterialApp Widgetthemeにテーマの定義を行います。ここでアプリに合わせた色や文字サイズを定義することで、アプリ全体の統一感を出すことができます。

MaterialApp WidgetのコンストラクタにdarkThemeがあるので、ここにダークモードの時のThemeDataを指定してあげればOKです。

例えばこんな感じで指定してあげます。

MaterialApp(
	theme: ThemeData(brightness: Brightness.light), // OS の設定がライトモードの時
	darkTheme: ThemeData(brightness: Brightness.dark), // OS の設定がダークモードの時
	home: Scaffold(),
)

provider を使って超簡単にダークモードに対応する方法と組み合わせることで、OS の設定優先・アプリの設定優先を切り替える仕組みができます。 Twitterの公式アプリなどが切り替えられる仕組みになってますね。

私としてはまず今回紹介した方法で OS の設定に連動するようにして、ユーザの強い要望があればアプリの設定でライトモード・ダークモードを切り替えるようにするのがいいと思っています。

公式ドキュメント