Improving User Experience from the Details: Setting Android and iOS Splash Screens in Flutter Cross-Platform App Development

Preface

Developing apps with Flutter is convenient and fast, except that during a cold start the Dart engine needs to load, causing a brief white screen that seriously affects the user experience. At this point we need to set a splash image, like most domestic apps (for example WeChat's globe), so that this image is shown when launching the app, and only after loading is complete do we enter the app, so as not to affect the user experience.

Android Splash Screen

First, prepare the splash image, named splash.png in this article, and add it according to different resolutions into the corresponding mipmap-hdpi / mipmap-mdpi / mipmap-xhdpi / mipmap-xxhdpi / mipmap-xxxhdpi directories.

Then edit the /android/app/src/main/res/drawable/launch_background.xml file. By default it should look like this:

<?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"/>
</layer-list>

As you can see, it was originally a white background, no wonder there's a brief white screen on launch. Now we comment out that white background line of code and change it to the following:

<?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="fill"
                android:mipMap="true"
                android:src="@mipmap/splash"/>
    </item>
</layer-list>

This way the image will be displayed when the Android app launches. Nice.

iOS Configuration

(Note: Since I don't have a Mac computer, I cannot test the iOS running effect. The configuration method comes from reference materials)

First, open the ios directory with Xcode, drag the image into the Runner root directory on the left side of the interface, check Copy items if needed, select Create groups and check Runner below.

After that, in the Project navigator on the left, open the file Runner/Runner/LaunchScreen.storyboard. Then in the middle section expand the view tree and find LaunchImage.

After clicking, look at the Attributes inspector on the right, fill in splash.png in the image field, and change Content Mode to Scale To Fill.

Select the image, then in the View Controller scene on the left, select and cut the image splash.png and paste it, to clear the crosshairs (constraints).

Edit the image's constraints so that it fills the entire screen.

Click the constraint editor in the lower right corner of the screen:

Fill in 0 in all the blanks above, then click Add 4 Constraints.

And that's it~

Flutter Splash Screen

After setting this up we'll find that although we now have a splash image, because today's phones are all so high-performance it finishes loading in an instant, so every time you open it the splash image just flashes by, which isn't a great experience either. So we need to display this splash screen again inside Flutter. We could even, like many domestic rogue apps, add an ad lasting as long as 5 seconds on the splash screen (just kidding)

Below is the Dart code for my app's splash page, for everyone's reference. With Future.delayed(Duration(seconds: 1)) you can stay on this page for 1 second; if you want it displayed a bit longer, just change it to more.

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class SplashRoute extends StatefulWidget {
  @override
  _SplashRouteState createState() => _SplashRouteState();
}

class _SplashRouteState extends State<SplashRoute> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 1)).then((e) {
      Navigator.of(context).pushReplacementNamed('home');
    });
  }

  @override
  Widget build(BuildContext context) {
    // 隐藏状态栏
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

    return Container(
      color: Colors.lightBlue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FaIcon(FontAwesomeIcons.cat, size: 100, color: Colors.grey[200]),
          Text(
            '壹喵',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 30,
              color: Colors.grey[200],
              decorationStyle: TextDecorationStyle.dotted,
              decorationThickness: 0,
            ),
          ),
        ],
      ),
    );
  }
}

ok

That's it. Although it's just a very small detail, it can greatly improve the user experience. Especially at night, the apps we develop all adapt to the system's dark mode, but in that instant of launch there's a white screen. If it flash-blinds the user's eyes, our app probably won't be far from getting 1-star ratings and being taken down...