Flutter 開發 Android & IOS 啟動頁 splash page

chengww發表於2019-04-02
FlutterAndroidiOS

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 啟動背景

  1. 使用 xcode 開啟專案的 ios 目錄。

  2. 拖拽圖片進 xcode 專案開啟介面左側 Runner 根目錄。

    勾選 Copy items if needed，選中 Create groups 並在下方勾選 Runner。

    如圖：

    Flutter 開發 Android & IOS 啟動頁 splash page

  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

相關文章