Flutter:ダークテーマ適用の仕方

Flutter
スポンサーリンク

Flutterでダークテーマを適用する方法

はじめに

最近Flutterを使って実際に仕事をするようになりました。主にUI作りに関しての仕事が多いのですが、初めて仕事としてプログラミングをしているので非常に新鮮です。

またプログラミングを仕事として行うことに関しての感想なども書きたいと思います。

 

さて本題ですが、最近アプリの設定などでテーマをダークテーマ(ツイッターの夜間モードみたいな)に設定できるアプリをよく見ます。

 

今回はFlutterでアプリを作る際にダークテーマを適用する方法を紹介します。

非常に簡単にできるので紹介されなくても知っている人も多いかと思いますが、、、笑

 

ですので、それだけじゃなくダークテーマと普通のテーマの切り替え機能の追加なども簡単に実装することができるのでそのやり方も一緒に紹介しようと思います。

 

ダークテーマの適用

MaterialAppで適用

ダークテーマの適用は下の1行のプログラムを追加するだけで行えます。

 

この’theme: ‘は’MaterialApp’のプロパティとして使用し、’ThemeDate.dark()’を指定することでデフォルトのダークテーマが適用されます。

デフォルトで使用できるテーマとして

  • ThemeDate.dark()
  • ThemeDate.light()
  • ThemeDate.fallback()

があります。が、fallbackはデフォルトでの設定でlightと同じらしいです。

 

サンプルプログラム

以下がダークテーマを適用したサンプルプログラムです。

 

テーマ切り替え機能

Switchでテーマを切り替えられるようなテーマ設定機能の追加もできます。

先ほどのサンプルをベースにして作りながら説明して行きます。

 

MyApp修正

Switchでテーマを変更し、すぐ表示を切り替えるにはsetState関数を用いる必要があります。setState関数を使うにはStatefulWidgetを用いる必要があるので先ほどのコードを修正します。

 

テーマを変更するため方法として、MaterialAppで’theme: ‘にThemeDate型の変数を入れ、その変数の値を変更するというのがわかりやすいわかり安く簡単です。

今回はそのための変数’themeDate’を定義し初期値としてThemeDate.light()を入れています。

またをSwitch押した時に呼ばれる関数を用意します。引数にBool変数を用いているのはSwitchでの切り替えを行うからです。

 

また非常に重要なポイントですが、Switchを実装しているのはあくまでMyHomePageクラスであり、Switchを押した時に呼ばれる関数’applyThemeDate’をMyHomePageクラスで使うには関数を渡しておく必要があり、MyHomePageに関数を入れます。(クラスのコンストラクタで設定する)

 

以下が修正したMyAppクラスです。

 

MyHomePage修正

次にMyHomePageクラスを修正して行きます。

 

Switchが押された時ONとOFFで切り替わっている表示の更新をするためにこちらもStatefulWidgetに変更します。

 

MyAppで定義された関数を使うため、コンストラクタに新しいapplyThemeDate関数を設定します。

 

SwitchとSwitchで使うためのBool(真偽値)変数darkThemeを用意しスイッチを作ります。darkThemeが’true’の時はダークテーマ、’false’の時は普通のテーマになるように作っていくので、初期値は’false’としています。

配置する場所はとりあえずテキストの下あたりで良いでしょう。

 

SwitchのonChangedイベントに呼び出すapplyThemeDate関数を入れます。今回StatefulWidgetで使用しているので呼びだす際にはwidget.で呼び出します。

 

以上のように変更したMyHomePageクラスが以下です。

 

サンプルプログラム

以下が修正した全てのプログラムです。

 

最後に

このようにFlutterでダークテーマを簡単に実装することができました。

 

Switchを使ってテーマを適用する関数を呼び出しているのが直下のMyHomePageですが、関数を引っ張っていくことでさらに先のクラスからも同様に呼びだすことができます。

 

これからも「FlutterでこんなUI作れます」みたいな記事ちょいちょい書いていくのでぜひ参考にしてください。

コメント