[Flutter]ダークモードを実装する

はじめに

今回はダークモードを flutter で実装する方法について書いていこうと思います。
私も普段から目が疲れるという理由やかっこいいと理由でダークモードを利用しているのですが、ふと自分がアプリを作る際にダークモードは実装できるのか、できるならどのようにすればよいのか気になったので調べてみました。

ThemeMode の設定

まずはダークモードとライトモードを切り替えられるように ThemeMode というものを設定していきます。これはアプリ起動時に重要な要素のため、MaterialApp の中に書きます。
それぞれのプロパティの詳細は以下のようになっています。

theme ライトモードのテーマを設定
darkTheme ダークモードのテーマ設定
themeMode デバイスの設定に合わせてテーマを設定

以下はそれを用いたコード例です。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: lightModeTheme
      darkTheme: darkModeTheme
      themeMode: ThemeMode.system,
      home: MyHomePage(),
    );
  }
}

カスタムテーマの設定

次に、それぞれのモードのカラーを設定します。
多くのカスタムテーマを設定できるようですが、ここでは主に背景とテキストの色を設定しています。
コードの例は以下の通りです。

final ThemeData darkModeTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.blue,
  backgroundColor: Colors.black,
  textTheme: TextTheme(
    bodyLarge: TextStyle(color: Colors.white),
    titleLarge: TextStyle(color: Colors.white),
  ),
);

final ThemeData lightModeTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.red,
  BackgroundColor: Colors.white,
  textTheme: TextTheme(
    bodyLarge: TextStyle(color: Colors.black),
    titleLarge: TextStyle(color: Colors.black),
  ),
);

Text をモードによって色を変更させる

上述のコードでライトモードとダークモードのテキストカラーを設定しましたが、実際にどのように書けばモードによってカラーが変更するかというと、Theme.of(context) を使って情報を取得します。
モードによってテキストカラーを変更したい場合とそうでない場合に分けてコード例を書いておきます。

設定したテーマカラーで固定したい場合

Text(
  'Hello World',
  style: Theme.of(context).textTheme.titleLarge,
)

モードによってテーマカラーを変更したい場合

Text(
  'Hellow World',
  style: TextStyle(
    color: Theme.of(context).textTheme.bodyLarge?.color,
  ),
)

ユーザーがモード選択を行う場合

ユーザーがダークモードやライトモードを手動で切り替えたい場合、ThemeMode を変更することで可能になります。chatGPTを参考にしたコードの例が以下の通りです。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ThemeMode _themeMode = ThemeMode.system;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ダークモード切り替え')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            setState(() {
              _themeMode = _themeMode == ThemeMode.dark
                  ? ThemeMode.light
                  : ThemeMode.dark;
            });
          },
          child: Text('テーマ切り替え'),
        ),
      ),
    );
  }
}

変更を次回以降開いた場合にも保存したい場合には SharedPreferences を使うといいそうです。
これを使った保存方法等は詳しくわからないため、またの機会に詳しく調べて書こうと思います。

最後に

今回はダークモードについてまとめてみました。
ユーザーの設定を利用してダークモードやライトモードに反映させるだけでなく、アプリ内でユーザーがモード選択をできるように実装する方法がわかりました。
デザイン性の面ですべてのカラーを設定していくことは大変なため、どの部分は変えるのか、どこは変えずに共通の色なのか、しっかり考えながら実装していくべきだと感じました。