Flutter iOS dark modeが設定された環境では起動画面を黒くする

この記事ではFlutterで作成するiOSアプリの起動画面を、ダークモード設定がされていた端末の場合は黒色で表示する方法についてまとめます。

方法

LaunchScreen.storyboardの背景色の設定を、 System Background Color に設定しておくことで、

通常時 ダークモード設定時
白(ホワイト) 黒(ブラック)

自動的に色が設定されます。

手順

1. XCodeを開く

Flutterプロジェクトディレクトリにある、XCode のプロジェクトファイル Runner.xcworkspace を開きます。

ios/Runner.xcworkspace
をダブルクリックすることで、XCodeが起動します。

2. LaunchScreen.storyboardを選択します。

3. Viewを選択します。

4. Backgroundの設定を変更

プルダウンでカラーリストを開き、System Background Color を選択します。

まとめ

Flutterプロジェクトの説明としてきましたが、XCode上での設定になり、Flutter開発環境でない場合でも対応が可能です。

希望のカラーを指定したいところですが、ひとまずこの調整で簡単に起動画面のダークモード対応できます。

参考ページ

Dark mode launch screen in iOS 13

Flutter iOS dark modeが設定された環境では起動画面を黒くする
最新情報をチェックしよう!