Flutterで開発した弊アプリPikaPika(iOS/Android)ではダークモード対応を行っているのですが、スプラッシュ画面だけは白い背景色のままで対応できていないことに気がつきました。
眩しくないようにダークモードを使っているはずなのに、起動時に真っ白な画面が一瞬でも表示されるのは辛い。(これまで辛い思いをしていたユーザさんごめんなさい。)
調べたところサクッと対応できそうだったので、修正対応を行うと同時に備忘録として対応方法を残します。
開発環境
Tool | Version |
---|---|
macOS | 10.15.7 |
Xcode | 4.1 |
Android Studio | 4.1 |
Flutter | 1.22.5 |
Dart | 2.10.4 |
前提
下記のようにOSのダークモードに対応していること。
- | Light | Dark |
---|---|---|
iOS | ||
Android |
iOS側の対応
まず、対象のアプリのRunner.xcworkspaceを開きXcodeを立ち上げます。
次に、Runnerディレクトリ配下のLaunchScreen.storyboard
を開き、Viewを選択した後、右側のAttributes Inspector
からBackground
をSystem Background Color
に設定します。
以上でiOS側の設定は完了です!
Android側の対応
まず、下記のres
ディレクトリにdrawable-night
というディレクトリを作成し、drawable
ディレクトリのlaunch_background.xml
を作成したディレクトリにコピーします。
android/app/src/main/res
次に、launch_background.xmlの中身を下記のコードに書き換えます。
<?xml version="1.0" encoding="utf-8"?> <!-- Modify this file to customize your launch splash screen --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/black" /> <!-- You can insert your own image assets here --> <!-- <item> <bitmap android:gravity="center" android:src="@mipmap/launch_image" /> </item> --> </layer-list>
以上でAndroid側の設定は完了です!
まとめ
iOS・Androidでそれぞれ対応が必要となりますが、思ったより小さな修正で済みました。
これで次回アップデート以降、辛い思いをするユーザさんが減るはず…!
今回の対応内容をGitHubに上げているので、分かりづらい箇所があればこちらを確認していただければ幸いです。
宣伝
いくつか個人開発でアプリをリリースしているのでよかったら見てみてください!