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.

Need Help With Flutter Development?

Work with our skilled Flutter developers to accelerate your project and boost its performance.

Hire Flutter Developers

Support On Demand!

Related Q&A