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。