第四百四十九回

我们在上一章回中介绍了"overlay_tooltip简介"相关的内容，本章回中将再谈flutter_launcher_icons包.闲话休提，让我们一起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。我上次没有运行成功就是这个原因；

看官们，与"如何处理ListView中的事件冲突"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!