ないぱかの記録

ないぱかからあるぱかになれるか

【Flutter】スプラッシュ画面のダークモード対応【iOS/Android】

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からBackgroundSystem 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側の設定は完了です!

まとめ

iOSAndroidでそれぞれ対応が必要となりますが、思ったより小さな修正で済みました。

これで次回アップデート以降、辛い思いをするユーザさんが減るはず…!

今回の対応内容をGitHubに上げているので、分かりづらい箇所があればこちらを確認していただければ幸いです。

dark_mode_compatible_app

宣伝

いくつか個人開発でアプリをリリースしているのでよかったら見てみてください!