Flutter 專案的閃屏頁方案詳解

Turbo Rabbit發表於2020-04-16
Flutter

前言

在APP專案中閃屏頁（或啟動頁）的作用是為了解決在程式顯示第一幀之前，不要出現白屏的現象，尤其是在純RN和Flutter的專案裡面，資源載入完成到顯示的速度會比Native要遜色一些。這裡主要總結純Flutter專案可選擇的閃屏頁實現方案，大部分為 pub.dev 上比較受歡迎的幾種。

效果展示

Flutter 專案的閃屏頁方案詳解

Native 處理

有native開發人員，建議使用。

flutter_native_splash

第三方庫檔案 flutter_native_splash 用於自動生成用於在Android和iOS中新增初始螢幕的本機程式碼。使用特定的平臺，背景顏色和初始影像進行自定義。

使用方法

  1. 在pubspec.yaml檔案中新增flutter_native_splash為dev依賴項。
dev_dependencies:
  flutter_native_splash: ^0.1.9
複製程式碼

  1. flutter pub get

  2. 將以下設定新增到專案的pubspec.yaml檔案

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false
複製程式碼

  • image:必須是一個png檔案。

  • color:"#42a5f5" 和 "42a5f5"均可

  • android或ios:到false，是否為特定平臺（ios/andorid）建立一個啟動畫面。

  • 如果影像應使用所有可用的螢幕（寬度和高度），則可以使用fill屬性。

flutter_native_splash:
  fill: true
複製程式碼

注意：fill iOS初始螢幕尚未實現該屬性。

  • 如果要在Android上禁用全屏啟動螢幕，則可以使用android_disable_fullscreen屬性。
flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true
複製程式碼
  1. 執行包 新增設定後，使用
flutter pub pub run flutter_native_splash:create
複製程式碼

程式包執行完畢後，您的初始螢幕已準備就緒。

注意：

  • 對於安卓： 要想使用沉浸式狀態列需將以下程式碼註釋，見下圖
    Flutter 專案的閃屏頁方案詳解
  • 如果啟動螢幕在iOS上未正確更新，或者在啟動螢幕之前遇到白屏，請執行flutter clean並重新編譯您的應用。
  • 這個包修改launch_background.xml，styles.xml以及MainActivity檔案在Android和LaunchScreen.storyboard，Info.plist和AppDelegateiOS上。

建議

如果要使用“材質圖示”作為初始影像，請在（material.io/resources/icons）中以Android的PNG格式下載圖示。我建議使用剛剛下載的資料夾中最大的圖示，以獲得更好的效果。drawable-xxxhdpi 材料顏色可在material.io/resources/color中找到

實現原理

  • Android

您的開機畫面將調整為mdpi，hdpi，xhdpi，xxhdpi和xxxhdpi可繪。 包含用於您的初始影像可繪製的標籤將新增到launch_background.xml 背景色將新增到中colors.xml並在中引用launch_background.xml。 styles.xml和會新增用於全屏模式切換的程式碼MainActivity。

下圖為執行成功後的安卓目錄結構圖

Flutter 專案的閃屏頁方案詳解

  • iOS

您的啟動影像將被調整為@3x和@2x影像。 顏色和影像屬性將插入中LaunchScreen.storyboard。 隱藏狀態列切換的程式碼將新增到Info.plist和中AppDelegate。

可以按照下圖修改圖片的位置大小：

Flutter 專案的閃屏頁方案詳解

flare_splash_screen

第三方庫檔案 flare_splash_screen 用於載入程式具有啟動畫面並帶有Flare動畫的功能，直到完成一些用於初始化應用程式的工作為止。

使用方法

  • 安裝 1.將庫新增到包的pubspec.yaml檔案中：
dependencies:
  flare_splash_screen: ^3.0.1
複製程式碼
$ flutter pub get
複製程式碼

3.匯入

import 'package:flare_splash_screen/flare_splash_screen.dart';
複製程式碼
  • Navigation

啟動螢幕將顯示動畫，並在完成後推送您指定的新路線，預設情況下會執行淡入淡出的動畫，但是您可以使用進行自定義 transitionsBuilder

SplashScreen.navigate(
    name: 'intro.flr',
    next: (_) => MyHomePage(title: 'Flutter Demo Home Page'),
    until: () => Future.delayed(Duration(seconds: 5)),
    startAnimation: '1',
),
複製程式碼
  • Callback

初始螢幕將顯示動畫，並在onFinished完成時呼叫回撥。

SplashScreen.callback(
    name: 'intro.flr',    
    onFinished: () {
      Navigator.of(context).pushReplacement(PageRouteBuilder(pageBuilder: (_,__,___) => MyHomePage(title: 'Flutter Demo Home Page')));
    },
    loopAnimation: '1',
    until: () => Future.delayed(Duration(seconds: 1)),
    endAnimation: '1',
),
複製程式碼
  • API

name ：閃屏頁動畫的路徑/名稱（需在pubspec.yaml中引入）

next ：閃屏頁動畫完成後進入的頁面/元件

loopAnimation：要執行的動畫名稱，預設與第一個引數相同

startAnimation：動畫在進入迴圈之前執行一次

endAnimation：動畫稱一次執行until完成

until：回撥，返回將來處理您的初始化

isLoading：until如果要使用布林值管理載入狀態，則可以選擇

height：閃屏頁動畫的高度，預設情況下會佔據所有可用位置

width：強閃屏頁動畫的寬度，預設情況下會佔據所有可用位置

alignment：閃屏頁動畫的對齊方式，預設居中

transitionsBuilder 顯示時適用的過渡 next

  • 可用的動畫模式
  1. 只有一個動畫

基本上，您需要顯示一個動畫，然後只需要停留在最後一幀即可。為此，只需指定startAnimation

  1. 開始和迴圈動畫

您的動畫具有簡介和迴圈狀態，為此只能指定startAnimation和loopAnimation

  1. 迴圈動畫

您的動畫具有完成和迴圈狀態，為此只能指定endAnimation和loopAnimation

  1. 開始和結束的動畫 您的動畫有一個簡介和一個結束，該結束應停留在最後一幀，以便僅執行此操作startAnimation，endAnimation

  2. 開始，結束和迴圈動畫 您的動畫具有簡介，結束和迴圈狀態，以便指定startAnimation，endAnimation和loopAnimation

  • 小結

這種方案雖然很炫酷，但是並不能解決白屏的問題，從程式啟動到動畫載入之前還是會有白屏的現象。

總結

要想解決白屏還是離不開Native的支援，有Native開發者可以直接使用native開發，沒有Native開發者可以選擇flutter_native_splash方案，可以利用flare_splash_screen增加動畫效果。

相關文章