Is there a way to change the splash screen color based on the Apps theme?

Question

Can the native android splash screen color be changed programmatically, so that it can be set fitting to the theme chosen for the Flutter app?

Kind of like how the WhatsApp splash screen loads in a dark theme when the System theme is set to dark.

Dark and light WhatsApp splash screen:

I guess this uses two themes for the splash screen, which are linked to the system theme, but I don't know that much about how and if that's possible.

So the question is: Is it possible to change the color/theme of the splash screen while running a flutter application, so that on the next start of the app the native android splash screen loads in the same theme as the Flutter app?

(Sorry if I repeated myself a lot, but I want to describe what I'm asking as good as possible)

Answer 1

In your project folder's android/app/src/main/res there should be a drawable folder, which contains the launch_background.xml for light theme. Duplicate this folder and call the second one drawable-night and configure the dark theme style. It will automatically change based on Android's system theme.

The launch_background.xml in the drawable (light theme) folder can be structured as so, to display an image with a white background:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_image" />
    </item>
</layer-list>

The same can be done in the launch_background.xml in the drawable-night (dark theme) folder, replacing "@android:color/white" with "@android:color/black" for a black background.

Do note that the images must be inside of the drawable and drawable-night folders being used respectively. As far as I know, the format must be a png.

I found this useful article that addresses and explains native splash screen theming.

Answer 2

If you set the splash screen from the Android folder xml files, then i guess you can't escape writing some Native code and placing some of your theming logic in the Android subfolder. On the other hand, if the theming logic and splashscreen is both in the main.dart file. Then you can just store the two different splashscreens you want to use and add some if-else statement to display the splash screen and also save user theme preference. If you don't know how to do this, you can follow this thread: How to load theme at beginning in fluttter

Answer 3

You can use some sort of SharedPreferences to hold the current state of the Theme. Then return the desired theme to the MaterialApp based on the value saved in your Shared Preferences. I personally use HydratedBloc package to save the current states of my app, including Theme.