Flutter淘宝App添加启动图最简单实现方法

Flutter是移动跨平台的UI框架，一份代码即可在Android和iOS上一致的体验，但是有一些还是需要我们去修改iOS和Android代码才能实现的，比如今天要说的启动图！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

Flutter默认是没有启动图的，所以打开App是闪现的界面就是一个白屏，一个体验好的App肯定是需要启动图的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

目前使用Flutter开发的应该大部分是iOS或Android的开发者，要么会Android，要么会iOS，对于涉及修改启动图，可能就有点一脸懵逼了。这篇文章我会教大家给App添加启动图最简单的方法，相信会给你带来帮助！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

完整示例请看 GitHub：Flutter 淘宝App文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

一、iOS启动图设置

1、添加启动图

首先我们打开工程
找到Assets.xcassets这个文件
打开后点击+
再点击New Image Set
给图片命名 然后分别添加@2x、@3x图片文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

@1x图片就不需要了，在iPhone 3GS上才需要文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

2、设置启动图

Xcode已经给我们默认生成了LaunScreen.storyboard，通过这个文件我们就可以修改启动图了。
步骤如下图所以，再次运行，你会发现启动图不再是白屏了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

注意要修改图片的Content Mode为Scale To Fill文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

二、Android启动图设置

1、添加启动图

打开res目录，路径为android/app/src/main/res
将你的启动图依次添加到mipmap目录中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

图片的尺寸可以都一样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

设置启动图

打开res目录下drawable目录
打开launch_background.xml文件
添加如下代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13653.html

//这样写可以通过图片铺满整个屏幕，不同屏幕可能会有拉伸
<item android:drawable="@mipmap/launch_image"></item>
复制代码