Flutter 项目的闪屏页方案

程序君 iOS开发

2020年02月24日 11:00

前言

在APP项目中闪屏页（或启动页）的作用是为了解决在程序显示第一帧之前，不要出现白屏的现象，尤其是在纯RN和Flutter的项目里面，资源加载完成到显示的速度会比Native要逊色一些。这里主要总结纯Flutter项目可选择的闪屏页实现方案，大部分为 pub.dev 上比较受欢迎的几种。前言

https://pub.dev/

Native 处理

这里就不多说了，Native处理闪屏页不管是Android还是iOS官方都有很成熟的解决方案。

flutter_splash_screen 插件

flutter_splash_screen 0.1.0

https://pub.dev/packages/flutter_splash_screen#-readme-tab-

这个名字叫的很大气，然而实际却不太硬。不知道为何受欢迎程度还挺高，难道是因为上架时间早？

目前来看这个插件没人维护，API不完善，issue没人解决。这里提到这个插件主要想让同样在选闪屏页方案小伙伴就别再趟坑了，绕路节省时间。

flutter_native_splash

flutter_native_splash 0.1.9

https://pub.dev/packages/flutter_native_splash#-readme-tab-

这个package可以自动生Android和iOS端闪屏页的代码。并且可以自定义image和背景color。

集成比较简单：

添加依赖

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" // 闪屏页背景色

还有一些针对平台的属性可供选用：

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起来也确实是我们想要的效果。

https://pub.dev/packages/flutter_native_splash#-readme-tab-

郑重说明：图标icon来自 iconfont 不做任何商业用途～～

https://www.iconfont.cn/

flare_splash_screen

flare_splash_screen 3.0.1 这个package让闪屏页具有Flare动画的功能。

https://pub.dev/packages/flare_splash_screen

添加依赖并执行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。

近期精彩内容推荐：

Python是一门神奇的语言！

IntelliJ IDEA 的 2020 ，真的很牛皮！

删库跑路真的发生，技术总监干的！

2020年Java框架排行榜，谁居榜首？

在看点这里好文分享给更多人↓↓

阅读原文

继续滑动看下一个