阅读 9359

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-xxxhdpimipmap-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。 如图:

    LaunchImage

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

    splash-view-tree

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

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

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

    splash-masonry

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

  5. 现在运行 Flutter 项目到 IOS 设备可以发现启动时的白屏已经没有了。

效果

最后附下实际效果:

splash-ios-demo