Adding a Splash Screen

This article shows how to add a splash screen while application loads.

Download source code.

Android

Copy image above in drawable folders and rename it to launch_image.jpg

Update launch_background.xml file, do not include extension 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="@drawable/launch_image" />
    </item>
</layer-list>

iOS

Replace LaunchImages by our image above.

Update contents.json file and update filenames.
{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.jpg",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.jpg",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.jpg",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Change background color

Android

Add color section to android\app\src\main\res\values\styles.xml.
We name it primaryColor and it’s black.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <color name="primaryColor">#FF000000</color>
</resources>

Update android\app\src\main\res\drawable\launch_background.xml and set our new primaryColor.

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

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

iOS

Open ios\Runner.xcworkspace file with Xcode.
Select LaunchScreen.storyboard and click on View.

On the right side, click on Attributes inspector in toolbar (fourth icon), click on Background, select custom and set color.

Save and close XCode.
Open Flutter project again and build apk.