第四百四十一回 再谈flutter_native_splash包

我们在上一章回中介绍了"overlay_tooltip简介"相关的内容，本章回中将 再谈flutter_native_splash包.闲话休提，让我们一起Talk Flutter吧。

1. 知识回顾

我们在第四百一十一回介绍了flutter_native_splash包的概念和用法，该包主要用来实现App的程序启动页面。不过我们当时运行后并没有实现启动页面，经过仔细分析后我可以使用这个包实现splash页面，本章回中将继续介绍它的用法，同时分享相关的使用技巧和经验。

2. 使用方法

首先创建一个新的yaml文件，文件名必须是flutter_native_splash.yaml;

• 在文件中配置相关信息,这些信息主要用来控制splash页面的颜色和图片等内容;
• 运行命令：flutter_native_splash:create，生成splash页面需要的图片和相关资源文件；
• 在main文件中添加代码，主要用来初始化包，并且启动splash页面；
• 在主页面中停止splash页面，然后会自动显示程序的主页面；

关于上面的步骤还有一些细节需要说明：

• 上面的步骤中也可以不创建yaml配置文件，而是直接在pubspec.yaml文件中配置，不过要顶格，不能向加入插件一样有空格。我们推荐单独建立一个文件去配置splash;
• 在代码中需要注意的是一定要移除splash页面，如果不移除splash，就不会进入主页面，导致程序一起卡着不动。
• 运行命令生成图片和资源文件时必须在系统的终端中运行命令，IDE中无法识别dart命令。会报无法识别dart命令的错误；
• 运行命令时先切换到项目根目录下，不需要在create后面加path/flutter_native_splash.yaml(官方文档中介绍命令时需要添加路径)命令可以自动识别该文件，前提是flutter_native_splash.yaml文件位于项目根目录下。否则会报错误：Could not find file flutter_native_splash:create
• 如果不想使用该插件了，可以把命令中的create替换成remove：flutter_native_splash:remove来删除该插件生成的关于splash的文件；
• 运行命令后会在Android的drawble目录下生成background.png文件，同时在其它drawble-xxxdpi目录下生成splash.png和android12splash.png文件。
• 运行命令时也修改了launch_background.xml文件，修改内容就是修改背景图片和splash图片的名字。我感觉把背景从颜色修改成图片不太好.为此还修改了styl.xml中的内容。IOS平台下会修改info.plst和Runner/Asset目录下的LaunchImage图片。web等其它平台也会生成相应的文件,不过可以配置成false.这样就不生成了。

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

我总结为:先在yaml文件中的配置splash相关信息，然后通过命令生成不同分辨率下的splash图片，接着修改配置文件(launch_background.xml)中的内容应用于splash功能。最后是在代码中导入该功能,同时控制splash的启动时长。

下面是运行命令时的结果，请大家参考，该结果与配置有关，配置不同生成产物不同：

your_pach% dart run flutter_native_splash:create
Building package executable... 
Built flutter_native_splash:create.
[Android] Creating default splash images
[Android] Creating default android12splash images
[Android] Creating dark mode android12splash images
[Android] Updating launch background(s) with splash image path...
[Android]  - android/app/src/main/res/drawable/launch_background.xml
[Android]  - android/app/src/main/res/drawable-v21/launch_background.xml
[Android] Updating styles...
[Android]  - android/app/src/main/res/values-v31/styles.xml
[Android] No android/app/src/main/res/values-v31/styles.xml found in your Android project
[Android] Creating android/app/src/main/res/values-v31/styles.xml and adding it to your Android project
[Android]  - android/app/src/main/res/values-night-v31/styles.xml
[Android] No android/app/src/main/res/values-night-v31/styles.xml found in your Android project
[Android] Creating android/app/src/main/res/values-night-v31/styles.xml and adding it to your Android project
[Android]  - android/app/src/main/res/values/styles.xml
[Android]  - android/app/src/main/res/values-night/styles.xml
[iOS] Creating  images
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
[Web] Creating images
[Web] Creating images
[Web] Creating background images
[Web] Creating CSS
[Web] Updating index.html
╔════════════════════════════════════════════════════════════════════════════╗
║                       NEED A GREAT FLUTTER DEVELOPER?                      ║
╠════════════════════════════════════════════════════════════════════════════╣
║                                                                            ║
║   I am available!  Find me at https://www.linkedin.com/in/hansonjon/       ║
║                                                                            ║
╚════════════════════════════════════════════════════════════════════════════╝

✅ Native splash complete.
Now go finish building something awesome! 💪 You rock! 🤘🤩
Like the package? Please give it a 👍 here: https://pub.dev/packages/flutter_native_splash

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();
  }

编译并且运行上面的程序可以看到splash页面。我在这里就不演示程序的运行结果了，建议大家自己去实践。

4. 经验与总结

4.1 经验分享

这个插件看着简单，不过在使用时还有些细节，比如我上次就没有运行成功，反复分析后才运行成功，接下来我们分享一些使用过程总结的经验，详细如下：

• 配置文件中内容需要专门对Android12适配，不然高于此版本的系统不会产生splash效果；
• 官方关于配置文件的内容写的比较详细，有些参数无法理解的话可以参考github的介绍，它配有图形，或者看Android官方文档中关于splash的介绍也可以；
• 使用命令生成图片时需要在电脑的终端运行命令，而且可以通过命令的运行结果查看生成的图片和xml等配置文件；
• 如果手机上没有效果，试试单独启动app，而不是通过IDE直接运行app。我上次没有运行成功就是这个原因；

4.2 内容总结

使用这个插件实现splash页面可以总结为三个步骤：填写配置信息 -> 生成图片等资源 -> 代码中使用splash资源。

如果不使用插件的话，我们需要分平台修改配置信息，Andrid是在xml文件中，iOS是在Runner中。同时还需要UI设计师提供不同分辨率下的图片。这个插件与自己实现splash功能时的差别在于不需要分不同平台去配置splash信息，而且只需要一张图片就可以。通过包中的命令可以生成多个平台上的splash文件，对于每个平台可以自动适配不同的分辨率，比如android会在
drawable-xxxdpi等5个目录下生成对应的splash文件。IOS会生成1x,2x和3x格式的图片。整体来说该包实现了跨平台的功能，效率高一些。

看官们，与"再谈flutter_native_splash包"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！