第四百一十一回实现splash页面的另外一种方法

原创已于 2024-03-26 21:39:43 修改 · 669 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发Flutter #splash #程序启动页

于 2024-03-19 21:11:31 首次发布

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

本文讲述了在Flutter中尝试通过flutter_native_splash插件实现splash页面的过程，包括配置、代码示例，以及遇到的版本兼容问题和实际效果。尽管未成功，但提供了可能的原因分析。

文章目录

1. 概念介绍
2. 实现方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"使用intl插件时遇到的问题"相关的内容，本章回中将介绍 实现splash页面的另外一种方法.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的splash页面就是程序启动时显示的页面，我们在一百四十一回介绍过它的实现方法，不过我们介绍的是官方提供的方法，我们将在本章回中介绍另外一种实现方法:通过flutter_native_splash插件实现splash页面。

2. 实现方法

我们首先在yaml配置文件中添加包，并且通过pub get命令把包获取到项目中来，不过添加时对版本要求比较麻烦，经常会和其它包有冲突，下面是一个错误示例：

Because every version of flutter_test from sdk depends on path 1.8.3 and flutter_native_splash >=2.3.12 depends on path ^1.9.0, flutter_test from sdk is incompatible with flutter_native_splash >=2.3.12.
So, because fluttercookbook depends on both flutter_native_splash ^2.4.0 and flutter_test from sdk, version solving failed.

我的解决方法是尝试降低包的版本，多尝试几个版本就可以。添加完包后就可以使用了，下面是详细的使用方法，请大家参考：

创建一个新的yaml文件，文件名必须是flutter_native_splash.yaml;
在文件中配置相关信息,这些信息主要用来控制splash页面的颜色和图片等内容;
在main文件中添加代码，主要用来初始化包，并且启动splash页面；
在主页面中停止splash页面，然后会自动显示程序的主页面；

上面的步骤中也可以不创建yaml配置文件，而是直接在pubspec.yaml文件中配置，不过要顶格，不能向加入插件一样有空格。
需要注意的是一定要移除splash页面，如果不移除splash，就不会进入主页面，导致程序一起卡着不动。

此外，上面的步骤完成后可以在Android平台的程序上运行，在IOS平台上运行时需要把base.lproj拖入已经打开的xCode项目中，然后在弹窗中选择复制，这样就会复制一份启动项目的stroyboard到项目中。这个在官方文档中有详细介绍,我就不再介绍了。不过这个方法有待改进，因为程序编译都无法通过。

3. 示例代码

下面是程序的示例代码，与上一小节中的实现步骤完全匹配，请大家参考：

///yaml文件中的配置信息，可以参考官方文档
  color: "#42a5f5"
  #图片格式必须是png
  image: images/avata.png

/// 在main文件中添加代码，主要用来初始化包，并且启动splash页面；
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
///  在MaterialApp的home属性对应的页面中移除splash页面
    void initState() {
    super.initState();

    ///可以在这里添加一些延时在主程序页面中移除splash，不然无法显示页面
    FlutterNativeSplash.remove();
  }