Flutter 开发 Android & IOS 启动页 splash page

Hello，很久不见呀。最近对 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 启动背景

1. 使用 xcode 打开项目的 ios 目录。

2. 拖拽图片进 xcode 项目打开界面左侧 Runner 根目录。

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

   如图：

   

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

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

   

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

   

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

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

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

   

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

5. 如今运行 Flutter 项目到 IOS 设备能够发现启动时的白屏已经没有了。

效果

最后附下实际效果：