android 启动页_从细节入手改善用户体验，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"?>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    

    
    <item>
        <bitmapandroid: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(OneCat聚合阅读)的启动页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: [
          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星和下架也不远了……

推荐阅读 使用Kotlin搭配Springboot开发RESTFul接口(二)自定义配置、跨域、分页 聊聊Django应用的部署和性能的那些事儿 数据分析必备技能！3分钟教会你如何在PyQt中画好看的图表 Flutter移动应用快速构建实践——状态管理、国际化、数据持久化、性能优化(二) 无需折腾的Linux发行版：Manjaro体验与配置笔记，开箱即用 真香！ Asp.Net Core学习笔记：(二)视图、模型、持久化、文件、错误处理、日志