Flutter 專案的閃屏頁方案

前言

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

Native 處理

這裡就不多說了，Native處理閃屏頁不管是Android還是iOS官方都有很成熟的解決方案。

flutter_splash_screen 外掛

flutter_splash_screen 0.1.0 這個名字叫的很大氣，然而實際卻不太硬。不知道為何受歡迎程度還挺高，難道是因為上架時間早？

目前來看這個外掛沒人維護，API不完善，issue沒人解決。這裡提到這個外掛主要想讓同樣在選閃屏頁方案小夥伴就別再趟坑了，繞路節省時間。

flutter_native_splash

flutter_native_splash 0.1.9 這個package可以自動生Android和iOS端閃屏頁的程式碼。並且可以自定義image和背景color。

整合比較簡單：

1. 新增依賴

dev_dependencies:
  flutter_native_splash: ^0.1.9
複製程式碼

別忘記執行

flutter pub get
複製程式碼

2. 將設定新增到專案的pubspec.yaml中

flutter_native_splash:
  image: images/splash.png // 對應生成iOS中LaunchImage圖片，包含1x2x3x
  color: "#ffffff" // 閃屏頁背景色
複製程式碼

還有一些針對平臺的屬性可供選用：

flutter_native_splash:
  android: false  // 可以選擇是否支援android或者iOS
  android_disable_fullscreen: true // 禁用android全屏啟動
  fill: true // 如果影象可用在所有的螢幕上新增為true，目前只支援android
複製程式碼

3. 生成上面新增的資源到Native

flutter pub pub run flutter_native_splash:create
複製程式碼

可以看到對應生成的資原始檔

bogon:flutterdemo yin$ flutter pub pub run flutter_native_splash:create
[Android] Creating splash images
[Android] Updating launch_background.xml with splash image path
[Android] Updating colors.xml with color for splash screen background
[Android] Updating styles.xml with full screen mode setting
[iOS] Creating splash images
[iOS] Updating LaunchScreen.storyboard with width, height and color
bogon:flutterdemo yin$ 
複製程式碼

4. iOS端在Xcode工程中選中LaunchScreen.storyboard，關聯UIImageView和剛剛生成的圖片，如果有需要調整UIImageView的佈局。

到這裡使用 flutter_native_splash 0.1.9 方式製作閃屏頁就完成了，實際上從技術層面講這種方案還是Native的閃屏頁方案，只不過做成了工具提高了效率。最終run起來也確實是我們想要的效果。

鄭重說明：圖示icon來自 iconfont 不做任何商業用途～～

flare_splash_screen

flare_splash_screen 3.0.1 這個package讓閃屏頁具有Flare動畫的功能。

1. 新增依賴並執行flutter pub get

dependencies:
  flare_splash_screen: ^3.0.1
複製程式碼

2. pubspec.yaml中新增製作好的.flr，我這裡使用demo自帶的，公司專案中使用肯定是找設計師要。

  assets:
  - intro.flr
複製程式碼

3. conding

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

• SplashScreen.navigate方式

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen.navigate(
        name: 'intro.flr',
        next: (context) => BottomNavigationWidget(),
        until: () => Future.delayed(Duration(seconds: 5)),
        startAnimation: '1',
      ),
    );
  }
}
複製程式碼

• SplashScreen.callback方式

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(
        builder: (context) => SplashScreen.callback(
          name: 'intro.flr',
          onSuccess: (_) {
            Navigator.of(context).pushReplacement(PageRouteBuilder(
                pageBuilder: (_, __, ___) =>
                    BottomNavigationWidget()));
          },
          loopAnimation: '1',
          until: () => Future.delayed(Duration(seconds: 1)),
          endAnimation: '1',
          onError: (error, stacktrace) {
            print(error);
          },
        ),
      ),
    );
  }
}
複製程式碼

這個package的API寫的很靈活也很詳細，選擇你需要的屬性做對應的除錯即可，這裡不做過多解釋，直接看文件就好。

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

我理解這種方案需要跟Native的閃屏頁方案結合使用才是爆炸效果，至於如何做到閃屏頁和這個Flare動畫完美過渡就要交給設計師們發光發熱了。這裡就展示一個粗糙的效果：

總結

目前來看優雅的閃屏頁還是離不開Native的支援

團隊有Native開發者閃屏頁推薦選擇方案為Native處理。

團隊沒有Native開發者可以選擇flutter_native_splash方案。

追求炫酷的可以嘗試flare_splash_screen。