【Flutter編】ダークモードをONにすると status barが白くなる件について

iOS13で、OSの機能としてダークモードが追加されました。

設定アプリ > 画面表示と明るさ

ダークモードをONにすると「iOSネイティブアプリ」の場合、UIの背景色が自動で黒を基調とした色に強制変更されます。

「Flutter」の場合、UIパーツは影響を受けないのですが、status barが強制的に白くなります。

本記事では、ダークモードをONにした場合の強制status bar白色化を回避する方法を解説します。

Flutterでstatus barの色を変える方法

回避方法の前に、Flutterでstatus barの色を変える方法を説明します。

Flutterでは次の記述をbuild関数で呼ぶことで、status barの色を変更できます。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarColor: Colors.white, // Android用
    statusBarBrightness: Brightness.light // light:黒に, dark:白に (IOS用)
));

Brightness.lightと記述があれば、iOSのstatus barは黒くなります。
しかし、ダークモードをONにするとコチラが効かなくなります。

ダークモードの強制白色化回避方法

ダークモードの強制白色化は、XCodeのplistの2箇所を次のように書き換える事で回避できるようになります。
(項目がない場合は追加してください)

User Interface Style : Light
強制的にライトモード(ダークモードの反対)をONに
View controller-based satus bar appearance : YES
画面ごとにstatus barの設定ができるように

これで、Flutter側で指定したstatus barの色が、ダークモードONでも効くようになります。

AppBarのstatus barの色が白い場合

AppBarの背景色をAppBar自体に直接指定すると、ダークモードのON/OFFに限らず、自動でstatus barの色が白くなってしまいます。

マナー的にもよろしくないので、AppBarの背景色は
MaterialApp(theme:)に、ThemeData(primaryColor:)
として指定しましょう。

すると背景色の明るさに合わせで自動でstatus bar、titleの色が白 or 黒になります。

自動で決まるstatus bar、titleの色が気に入らない場合は
MaterialApp(theme:)に、ThemeData(primaryColorBrightness: Brightness.dark(白) or light(黒))
で強制的に白/黒を指定できます。

こうすることでテーマカラーを一箇所で管理できてメンテナンスしやすくなりますし、正式にダークモード対応する時もやりやすくなります。

(monoさん、アドバイスありがとうございます)

Flutter、AppBarの背景色の明るさが閾値以下か以上かでステータスバーのデフォルトが自動的に変わる(　´･‿･｀)
大抵そのままで良いものの、変えたい場合はAppBarのBrightness指定で変えられるけど、Theme活用すると一括で変えられてなお良い(　´･‿･｀) https://t.co/5DjNihGHFr pic.twitter.com/jSj53w22t3

— mono (@_mono) September 16, 2019