邯郸网站设计怎么开发,网页建站点,全国最大工地招工网,宁波营销型网站建设首选文章目录 1. 知识回顾2. 使用方法3. 示例代码4. 经验与总结4.1 经验分享4.2 内容总结 我们在上一章回中介绍了overlay_tooltip简介相关的内容#xff0c;本章回中将再谈flutter_native_splash包.闲话休提#xff0c;让我们一起Talk Flutter吧。
1. 知识回顾
我… 文章目录 1. 知识回顾2. 使用方法3. 示例代码4. 经验与总结4.1 经验分享4.2 内容总结 我们在上一章回中介绍了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替换成removeflutter_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();}编译并且运行上面的程序可以看到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包相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
