Flutter change splash screen background color

Question

I have this default code in my launch_background.xml file:

<?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/white" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

I would just like to know, how do I change this <item android:drawable="@android:color/white" /> to a custom colour, something like <item android:drawable="@android:color/#FFF8DC" />

Is there a reason why you're wanting to do it on the android side while using Flutter? You can just have your entry point into your app be a SplashWidget, which handles all your auth/loading logic, and then take advantage of FLutter's easy to use Theming scheme — Alan Negrete, Jun 13 '19 at 15:27
@android:color/white is just a reference. Did you try to replace the whole string with e.g. #000000? — Leonard Arnold, Jun 13 '19 at 15:28
@AlanNegrete When a Flutter app is launched the background specified in `launch_background.xml` is rendered on the screen for an indeterminate amount of time while the Flutter framework initializes. Changing this let's you better apply your app's brand to the launch experience on Android. — Chance Snow, Jun 13 '19 at 22:47
@ChanceSnow Gotcha! I guess it has always loaded so fast for me that I haven't even noticed it tbh! — Alan Negrete, Jun 14 '19 at 00:24

score 50 · Answer 1 · answered Jul 31 '19 at 12:51

50

Create a file android/app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="red">#FF0000</color>
</resources>

Edit android/app/src/main/res/drawable/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="@color/red" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

answered Jul 31 '19 at 12:51

Luke Pighetti

4,541
7
32
57

1

How does it know? There is no importing there. Please do enlighten me – emanuel sanga Jan 07 '21 at 09:07
1

Because convention. – Luke Pighetti Jan 07 '21 at 22:51
Ahaa got you boss – emanuel sanga Jan 09 '21 at 08:06
9

thanks. It works greatly. I faced one problem as used android:drawable="@ **android:** color/white" instead of android:drawable="@color/red". May be useful to someone. – Vijay Mar 04 '21 at 09:27
8

Please keep in mind you also need to change the drawable-v21. instead of – Nikash Deka Apr 08 '21 at 14:52
And for ios ? what i should do for ios ? – Ali Yar Khan Apr 30 '21 at 21:01

score 8 · Answer 2 · answered Jun 13 '19 at 15:28

8

Create colors.xml file in your app/src/main/res/values folder and in that file write

<color name="yourColor">#FFF8DC </color>

Then in your launch_background.xml file use it with,

<item android:drawable="@color/yourColor" />

answered Jun 13 '19 at 15:28

CopsOnRoad

237,138
77
654
440

This is not working. I am getting this error `android\app\src\main\res\values\colors.xml:1:50: Error: Premature end of file.`. I had to delete the `colors.xml` file for it to go away (uncommenting everything in the file didn't help) – Paul Kruger Jun 17 '19 at 19:26
Can you share the screenshot? I am not sure how you did it – CopsOnRoad Jun 18 '19 at 00:54
1

The reason you are getting the error is that is not the complete code for colors. It needs to be formatted as xml . Use the previous code snippet – Blacksmith Nov 05 '20 at 22:21
#C2002F – AzizStark Jun 10 '21 at 11:12

score 0 · Answer 3 · answered Aug 19 '23 at 08:56

0

For reference, I also needed to update the launch_background.xml of the drawable-v21 folder in the same manner. See: https://stackoverflow.com/a/71390884/13738523

answered Aug 19 '23 at 08:56

Luke

1,149
1
7
15

Flutter change splash screen background color

3 Answers3

Linked