Flutter製のサブスク管理アプリsubskunでダークモード対応した際の振り返り
はじめに
今日リリースした個人開発のサブスク管理アプリsubskunのバージョン1.3.0でダークモード対応をおこなった。
subskunはFlutterで作っており、ダークモード対応は簡単に導入することができた。
今回はFlutterでダークモードを導入する方法と、今回感じた振り返りをまとめておく。
ダークモードの導入方法
導入方法は簡単で、MaterialAppのdarkThemeにダークモード用のテーマを指定しておく。すると、themeModeがダークモードのときはダークモード用のテーマが自動で適用される。
return MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system,
home: Hoge(),
);ちなみにThemeModeはenumであり、以下の値を取ることができる。
ThemeMode.system- ユーザーの端末側での設定で、ダークモードであればアプリでもダークモード用のテーマが適用される。
ThemeMode.lightThemeMode.dark
導入に際して苦労したこと
ダークモードの導入自体は以上の設定をするだけで簡単にできたし、ダークモードを適用するとWidgetがデフォルトのダークモード用のテーマに切り替わった。
しかし、Widgetに対して独自に適用したいくつかの文字色や背景色などはダークモードの適用時は当然そのままなので、そのWidgetに対しては追加の対応が必要になった。
自分はThemeExtensionsを使用することで解決できたし対応箇所も数個だったので割とすぐに対応が完了できたが、これがたくさんあったらと思うとゾッとした。
ちなみにThemeExtensionsについてはFlutter公式のYouTubeが参考になる。その名前の通りThemeを独自拡張することができ、あるスタイルを一部のUIだけに適用したいといった場面に役立ってくれる。
上記を踏まえて感じたこと
WebであればUIの構造はHTML、スタイルはCSSと分かれているが、Flutterではそれらが一つにまとまっている。それは良さでもあるが、今回のような場合に個別のWidgetで様々なスタイルを適用していると対応が必要となる箇所が大規模になりつらくなってしまう。
また、モダンなアプリであればダークモード対応はあって当たり前にもなってきており、アプリを新規作成する際はそれを前提で作っておいた方が後々の苦労を小さくすることができる。
そこで、Flutterにおいてもスタイルの部分はUIの構造とは別の場所で一括で管理しておいた方が良いと感じた。その管理場所となるのがThemeDataになるのだろう。
もちろん、デフォルトのtextThemeなどのテーマだけでは足りなくなるので、その際は先ほどのThemeExtensionsでテーマを独自拡張することで対応することができる。
もしくはThemeDataで一括管理する以外の方法として、コンポーネントごとにスタイルやテーマを適用する方法もあるかと思う。この辺りはプロジェクトやチームに合わせて決めてゆけばよいだろう。
おわり
自分は今後アプリを新規作成する際は最初からテーマの設計をきっちりやるようになると思われる(書き捨てのコードはその限りではない)。後々の苦労を思えば最初にきっちりやっておくのなんて屁でもないし、後から得られるメリットに対しては十分すぎるほどペイできるだろう。
ちなみにsubskunにおいては、ダークモード対応よりアプリとして優先度の高い機能実装はたくさんあったが、まだ考えが固まりきっていなかったのと、ダークモード対応してみたいという思いで先にやっておいた。先にやっておいてよかった。
