Flutter 項目的閃屏頁方案

前言

在APP項目中閃屏頁（或啓動頁）的做用是爲了解決在程序顯示第一幀以前，不要出現白屏的現象，尤爲是在純RN和Flutter的項目裏面，資源加載完成到顯示的速度會比Native要遜色一些。這裏主要總結純Flutter項目可選擇的閃屏頁實現方案，大部分爲 pub.dev 上比較受歡迎的幾種。android

Native 處理

這裏就很少說了，Native處理閃屏頁無論是Android仍是iOS官方都有很成熟的解決方案。bash

flutter_splash_screen 插件

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

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

flutter_native_splash

flutter_native_splash 0.1.9 這個package能夠自動生Android和iOS端閃屏頁的代碼。而且能夠自定義image和背景color。less

集成比較簡單：ide

添加依賴

dev_dependencies:
  flutter_native_splash: ^0.1.9
複製代碼

別忘記執行工具

flutter pub get
複製代碼

將設置添加到項目的pubspec.yaml中

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

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

flutter_native_splash:
  android: false  // 能夠選擇是否支持android或者iOS
  android_disable_fullscreen: true // 禁用android全屏啓動
  fill: true // 若是圖像可用在全部的屏幕上添加爲true，目前只支持android
複製代碼

生成上面添加的資源到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$ 
複製代碼

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動畫的功能。

添加依賴並執行flutter pub get

dependencies:
  flare_splash_screen: ^3.0.1
複製代碼

pubspec.yaml中添加製做好的.flr，我這裏使用demo自帶的，公司項目中使用確定是找設計師要。

assets:
  - intro.flr
複製代碼

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。