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)

Solution

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.

Comments

[Gaweringo]

But the splash screen is shown before any Flutter code runs.

[Gaweringo]

Yeah it would have to be some native stuff, as I want to use the native splash screen. Do you have any idea on how to do that or where I should look?

[Gaweringo]

I originally wanted to change the splash screen based on the theme of the app alone (independent of the system theme) but it looks like that's not possible. This is the next best thing. Thank you!

[Sagar Nayak]

would you mind sharing the code here instead of referring to an article? the link might get deleted in the future.

[Apps 247]

Done, I added the xml code as well as some essential information from the article.

[Nithin Sai]

Is there any way to change this based on user preference and not system setting? I'm new to android development, so asking

[Nithin Sai]

Hey the flutter app starts after android is loaded, your answer only tells how to enable the dark theme after flutter starts, doesn't answer the og question

[Apps 247]

Flutter starts drawing after the android app is fully loaded in, so you won't be able to do that with Flutter, you'll have to use native code. You will likely have to store the user's preference on the device, and read it when the app starts up (and show the appropriate splash screen).

[Apps 247]

You can use a ternary operator in android xml (condition ? whatToDoIfTrue : whatToDoIfFalse) to decide the color.