第四百四十九回

文章目录

1. 知识回顾
2. 使用方法
3. 示例代码
4. 经验与总结
- 4.1 经验分享

我们在上一章回中介绍了"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"#图片格式必须是pngimage: 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();}