Android: How to configure a loading screen with background color and centered image

So, I've almost finished my Android app using Flutter, and now I've just created the icons using Android studio tools (right click on "res" folder -> new -> image asset...). So far so good, but now I'm having an hard time trying to figure out how to put the app icon in the loading screen. What I did so far is:

Creating a styles.xml under res/values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

Creating a launch_background.xml in res/drawable:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="center">
    <item android:drawable="@android:color/holo_green_light" />
    <item>
        <bitmap android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

but the asset @mipmap/ic_launcher is not resolved... I have no idea how to specify it correctly!

In AndroidManifest.xml I've defined the theme as android:theme="@style/LaunchTheme" and the icon as android:icon="@mipmap/ic_launcher"... and since the icon is correctly used by the app once installed, I don't get why in the manisfest is resolved and in the other file is not... what I'm supposed to do?

Solution 1: Eric Lima

You can use a dev dependencies package: https://pub.dev/packages/flutter_native_splash

Add on pubspeck.yaml

dev_dependencies:
   flutter_native_splash: ^0.1.9

declare your icon laucher and color

flutter_native_splash:
  image: 'assets/ic_launcher.png'
  color: "#36133d"

and them run:

1. flutter pub get
2. flutter pub run flutter_native_splash:create

Solution 2: Sam Catlow

I like the simplicity of Eric's response, additionally, there is thorough documentation on the flutter.dev website on how to do this without the additional package.

https://flutter.dev/docs/development/ui/splash-screen/android-splash-screen

Solution 3: daveoncode

So, after several attempts I've solved in by using the following configurations:

styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <color name="white">#FFFFFF</color>
</resources>

launch_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="center">
    <item android:drawable="@color/white" />
    <item
        android:width="400px"
        android:height="400px"
        android:drawable="@mipmap/ic_launcher"
        android:gravity="center" />
</layer-list>

The relevant difference is that I'm now using a drawable for the logo instead of a bitmap. Currently, it works perfectly in release mode (flutter clean && flutter run --release), even though in debug mode a black screen is visible for few milliseconds before the main Flutter widget is actually rendered.