Flutter 开发 Android & IOS 启动页 splash page

Hello，好久不见呀。最近对 Flutter 比较感兴趣，一直都在在看 Flutter 相关的内容。

准备简单的做一个 Flutter 的项目，也是好久没有更新博客了，正好结合里面启动页相关的内容写一篇博客。

Flutter

前言

启动页面（Splash）对于一个 APP 来说还是挺重要的，不设置启动页面打开 APP（特别是冷启动）时会有很长时间的白屏效果，这个对于用户体验来说，非常不友好。

OKay，下面开始进入启动页面的撰写。

Flutter 页面

资源引入

首先将启动页面的图片加入到项目目录：assets/images/splash.png，这里支持多分辨率图片，比如有 @3x 的图片可以放进 assets/images/3.0x/splash.png。这里的 @3x 和 IOS 是一样的。

注：IOS @3x 渲染后的分辨率为 1080x1920，等于 Android 的 xxhdpi

资源文件

然后在 pubspec.yaml 文件中引入资源：

flutter:
  assets:
    - assets/images/splash.png

页面创建

启动页面首先也是一个页面，命名为 splash_page.dart。

import 'package:flutter/material.dart';

class SplashPage extends StatefulWidget {
  SplashPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return _SplashPageState();
  }
}

class _SplashPageState extends State<SplashPage> {
  
  @override
  void initState() {
    // TODO: do something to init
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) {
      return Container(
        child: Image(image: AssetImage('assets/images/splash.png'), fit: BoxFit.fill,),
      );
    });
  }
}

代码很简单，就是一张图片，然后全屏填充。这里 fit 全屏的方式有两个选择：

BoxFit.fill
以（上下左右）拉伸的方式充满屏幕，不裁剪原图；
对应 IOS Content Mode：Scale to fill；
对应 Android xml 标签 <bitmap> 内属性 gravity：fill。
BoxFit.cover
以裁剪的方式充满屏幕
对应 IOS Content Mode：Aspect fill。

考虑到 Android 启动页面设置的全屏模式，这里选择 BoxFit.fill。

完成后运行程序会发现还是会有短暂的白屏时间，这是因为程序启动时加载所致。现在就需要我们在原生项目中添加启动页面背景。

Android 启动背景

将 splash.png 按分辨率添加到对应的目录 mipmap-xhdpi/mipmap-xxhdpi/mipmap-xxxhdpi。
mipmap-xxhdpi 对应的分辨率是 1080x1920。

然后打开项目的 ./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="@color/blue" />-->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="fill"
            android:mipMap="true"
            android:src="@mipmap/splash"/>
    </item>
</layer-list>

layer-list 其实就是将多个 drawable 按照顺序层叠在一起显示，在最前面的比如上面被注释掉的

<item android:drawable="@color/blue" />

会显示在最底层，成为背景。这里我们只想设置图片，直接注释掉。

gravity 为 fill 会将图片拉伸充满屏幕，和我们之后出现的页面 splash_page.dart 里面的图片 fit: BoxFit.fill 保持一致。

此时 Android 程序启动时就没有白屏了。

IOS 启动背景

使用 xcode 打开项目的 ios 目录。
拖拽图片进 xcode 项目打开界面左侧 Runner 根目录。

勾选 Copy items if needed，选中 Create groups 并在下方勾选 Runner。

如图：

image
完成后在左侧 Project navigator 打开文件 Runner/Runner/LaunchScreen.storyboard。

然后在中间部分点开 view tree，找到 LaunchImage。如图：

LaunchImage

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

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

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

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

splash-masonry

将上面填空处都填 0，然后点击 Add 4 Constraints。
现在运行 Flutter 项目到 IOS 设备可以发现启动时的白屏已经没有了。

效果

最后附下实际效果：

splash-ios-demo