[Flutter] Splash Screen

Outline
Prepare imaage
Install flutternativesplash
Configure Splash image
flutternativesplash package options
Generate Splash images
Tip
Completed

Outline

I try to develop an app with Flutter. In this blog post, I will introduce how to change the Splash screen in Flutter.

To apply a Splash screen, normally we need to create each image for Android and iOS and configure the images to each platform.

Adding a splash screen to your mobile app

However, if you use the flutter_native_splash package, you can change it more simply.

flutter_native_splash

Prepare imaage

There is no limitaion of the image file on the official document. However, I used the image file like the condition below.

PNG file
bigger than 3000px X 3000px

Store the file to assets/splash.png.

Install flutter_native_splash

To use the flutter_native_splash package, we need to install the flutter_native_splash pacakge. Execute the command below to install the flutter_native_splash pageckage.

flutter pub add flutter_native_splash --dev

Configure Splash image

Next, we need to configure an image for the Splash screen. To configure the splash screen, create the ./flutter_native_splash.yaml file in the Flutter project folder and modify it like the following.

...
flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash.png
  fullscreen: true

flutter_native_splash package options

The flutter_native_splash package has some options.

color: Splash screen background color
background_image: Splash screen background image
image: Splash screen image
color_dark: background color when the device is the dark-mode
background_image_dark: background image when the device is the dark-mode
image_dark: Splash screen image when the device is the dark-mode
android_gravity: Splash image position on Android. (bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top)
ios_content_mode: Splash image position on iOS. (scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight)
web_image_mode: Splash image position on Web. (center, contain, stretch, cover)
fullscreen: show the splash screen to full screen (true, false)
info_plist_files: if the info.plist file name is changed, set this option for it.

Generate Splash images

If you finish to configure the flutter_native_splash options, execute the command below to generate the Splash images.

flutter pub run flutter_native_splash:create

Tip

If you use the flutter_native_splash package to create the Splash images, you don’t need any modifiction to show the Splash screen.

You can use the Splash screen with the tips below.

Initial data

Normally, we show the Splash screen and get the initial data. At this time, we can use Future and async-await to get the data under the Splash screen.

import 'package:flutter/material.dart';

Future<void> main() async {
  bool data = await fetchData();
  print(data);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

Future<bool> fetchData() async {
  bool data = false;

  // Change to API call
  await Future.delayed(Duration(seconds: 3), () {
    data = true;
  });

  return data;
}
...

Change the main funciton to async-await, and get the data before starting the app with runApp. As this structure, we can get the data when the Splash screen is shwoing.

Status bar

In this blog post, I configured the fullscreen: true in the pubspec.yaml file to create the Splash images. I’m not sure this is the flutter_native_splash package bug, when the app is stared on iOS, the Status bar is not shown up. So I use the codeb below to display the Status bar.

...
import 'package:flutter/services.dart';
...
class Home extends StatelessWidget {
  Home() {
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: SystemUiOverlay.values,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Hello world!'),
      ),
    );
  }
}

Android 12 issue

From the Android 12 version, the app icon is shown on the splash screen basically. flutter_native_splash provides the options below to use another image instead of the app icon.

flutter_native_splash:
 android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

The new image is shown by clipping to a circle and on the center of the screen. So, I don’t use this option, and I modify the android/app/src/main/AndroidManifest.xml file by adding the code like the following.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">
   <application
        android:label="app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            ...>
            ...
            <!-- Displays an Android View that continues showing the launch screen
                Drawable until Flutter paints its first frame, then this splash
                screen fades out. A splash screen is useful to avoid any visual
                gap between the end of Android's launch screen and the painting of
                Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                ...
            </intent-filter>
        </activity>
        ...
    </application>
</manifest>

If you modify it like this, the app icon splash screen is shown first, and then, the splash screen created by flutter_native_splash is shown again.

Completed

Done! we’ve seen how to change the Splash screen on Flutter. Like this blog post, if you use the flutter_native_splash package, you can change the App Splash screen simply on Flutter.

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.