How to create a gradient color background for splash screen in Flutter?

Question

I'm working on the splash screen for my Flutter app, and in drawable folder I have to create a file called colors.xml in order to change background color for my splash screen. I'm finding it hard to make it a gradient color. My intention is to create a gradient background color that would start at the top left and end at bottom right, using two different colors. Does anyone have an example of how to do that in Flutter? Thanks! P.S. An is there a difference in the process for android and ios?

Answer 1

1 In \android\app\src\main\res\drawable\launch_background.xml

change this :

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

to :

<item android:drawable="@drawable/gradient_background" />

2 Create this file \android\app\src\main\res\values\colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="gradientstart">#3587d0</color>
    <color name="gradientend">#36f1d3</color>
</resources>

3 Finally, create this file \android\app\src\main\res\drawable\gradient_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/gradientstart"
        android:endColor="@color/gradientend"
        android:angle="90"/>    
</shape>

Answer 2

For Android first define two color in your colors.xml:

<color name="gradientstart">#888888</color>
<color name="gradientend">#111111</color>

then in \android\app\src\main\res\drawable\launch_background.xml just replace this:

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

to this:

<gradient android:startColor="@color/gradientstart" android:endColor="@color/gradientend" android:angle="315"/>

and for ios according to this question

If your gradient is a simple vertical or horizontal gradient, and you’re really concerned about asset size, you can define a very narrow image and then add an image view with “scale to fill” content mode.

But these images are so small anyway, the amount of space saved will be negligible, so I’m not sure it’s worth worrying about.

Answer 3

I found use of flutter_native_splash much more easy and direct. Here's a link on the steps to creating one. First design your desired gradient as an image and instead of adding color, add a background_image on the pubspec.yaml file.

Something like:

    flutter_native_splash: 
         image: ""
         background_image: "assets/my_splash_background.png"