从细节入手改善用户体验，Flutter跨平台App开发中设置Android和iOS的启动页

前言

flutter开发App方便快捷，就是冷启动的时候要加载dart引擎有短暂的白屏，严重影响用户体验，这个时候我们就需要设置一个启动图片，像国内大部分App那样（例如微信那个地球），启动App的时候显示这个图片，加载完再进入App，不至于影响用户体验。

Android启动页

首先要准备好启动图，本文命名为splash.png，按照不同的分辨率添加到对应的mipmap-hdpi / mipmap-mdpi / mipmap-xhdpi / mipmap-xxhdpi / mipmap-xxxhdpi目录里面。

然后编辑/android/app/src/main/res/drawable/launch_background.xml文件，默认的应该是这样的：

<?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>

可以看到原本就是白色背景，难怪启动会短暂白屏，现在我们把白色背景这行代码注释掉，改成以下代码：

<?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>

这样Android App启动的时候就会显示这个图片了，舒服。

iOS配置

（注：由于我没有Mac电脑，因此无法测试iOS运行效果，配置方法来自参考资料）

首先用xcode打开ios目录，把图片拖进界面左侧的Runner根目录，勾选Copy items if needed，选中Create groups并在下方勾选Runner。

完成后在左侧 Project navigator 打开文件 Runner/Runner/LaunchScreen.storyboard。然后在中间部分点开 view tree，找到 LaunchImage。

点击后查看右侧 Attributes inspector，在 image 一栏中填写 splash.png，并将 Content Mode 修改为 Scale To Fill。

选中图片，然后在左侧 View Controller scence 中选中并剪切该图片 splash.png 并粘贴，以清除十字线（约束）。

编辑图片的约束，使其充满全屏幕。

点击屏幕右下角的约束编辑器：

将上面填空处都填 0，然后点击 Add 4 Constraints。

就OK啦~

Flutter启动界面

这样设置完我们会发现，虽然启动图有了，但是由于现在的手机性能都很高，一下子就加载完成，所以每次打开都是启动图一闪而过，这样体验也不是很好，所以我们要在Flutter里面再显示一遍这个启动界面，还可以想很多国产流氓App那样，在启动界面加上长达5秒的广告（误）

以下是我的App的启动页Dart代码，可以供大家参考，通过Future.delayed(Duration(seconds: 1))可以实现在这个页面停留1秒，要显示久一点就改多点。

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

这样就完成了，虽然只是一个很小的细节，但是却可以极大改善用户体验，特别是晚上，我们开发的App都会适配系统的神色模式，但是启动的这一瞬间一个白屏，如果把用户的眼镜闪瞎了，估计我们的App离被打1星和下架也不远了……