How to Use the Flutter Native Splash Screen

Follow the below steps to create a custom native splash screen.

Android

1. Go to android > app > src > main > res > drawable > lauch_background.xml.

2. Update the lauch_background.xml

• To use a custom background image

To use a custom background image
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:gravity="center" android:src="@drawable/splashImage"/>
    </item>
</layer-list>

• To use custom icon and background color

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:gravity="fill" android:src="@color/backgroundColor"/>
    </item>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/icon"/>
    </item>
</layer-list>

iOS

1. Open Xcode.

• To use a custom image,

Goto Images.xcassets
Add a new image and set it as LaunchScreen

• To set a custom layout

Open Runner > LaunchScreen.storyboard
Delete the previous components and click on the plus(+) icon to add new image & components

Work did:
1. The answer in the reference was containing only solution for Android, added iOS solution
2. The answer in the reference was containing only one solution, to add a custom icon with background color only, add another solution to add the full custom image.