Flutter启动页白屏处理

前言在上篇实现了一个Nike的加载页，但有一些遗留问题，其中之一就是启动时的白屏处理。如下：

启动页

几乎所有App都会设计一个启动页，Flutter项目如果不做处理的话app启动页尺寸要做多大，在点开时都会有这个白色的闪屏。其实这个启动页在项目文件就可以进行更改。

安卓1.打开AndroidManifes.xml文件,可以看到启动屏数据源指向了drawable中的launch_background。

2.打开drawable/launch_background文件，就会发现现在的启动页背景是白色。

3.若要设置图片样式的启动页，则需要将下面注释的内容放开。

4. 默认情况下是没有launch_image的，将启动页图片的名字设置为launch_image,然后放到drawable文件下，启动页就设置好啦。

iOS打开下面文件，将LaunchImag.png、LaunchImag@2x.png、LaunchImag@3x.png替换为我们自己的图片即可。

虚假の示例

这里以之前完成的启动图为例来试一下效果。

1.首先随便掏出个画图软件做一张启动页图片：

2.然后将上面所说项目中的图片替换为我们自己的图片看下效果：

。。。

这是什么鬼,难道图片尺寸必须跟屏幕保持一致才可以吗... 非也，其实用这种方式设置启动图并非上策，因为不同尺寸的屏幕间很难做适配，特别是示例中需要启动页中的logo与启动页消失后的logo大小保持一致的情况，所以需要尝试其他方法：真正の示例1.以iOS为例，使用Xcode打开项目，在Asset中我们看到了刚才拖入的图片。

2.点击LaunchScreen，这是iOSApp启动时展示的屏幕窗口，可以看到我们拖入的图片展示在一个imageView中。

3.那如果把LaunchImage的约束重新设置一下呢

4.再来看一下效果，这次似乎像那么回事儿了，但还是能发现logo大小不一样的情况（虽然这是我随手做的一张启动页图片，但既然我们的需求是根据代码，让启动页在所有屏幕上的显示效果都一样的话就不应止步于此）。

5.终极解决方案：设置背景底色，为盛放logo的imageView设置约束(在上一篇文章中，我们设置logo的初始大小为屏幕宽度的1/3，位置为屏幕的中心)，那么我们为imageView设置同样的约束，然后就有了⬇️

6.最后看一下效果：

完美

结语最后说一些题外话吧，其实看过苹果的App设计规范就会了解到，其实启动页被设计的初衷就是起一个过渡的作用，让用户在使用感受上不会觉得太过突兀，比如iOS系统自带的天气app，启动页只是一张简单的渐变图片，是不建议添加产品Logo或者其他一些花里胡哨的广告的，否则审核有可能会因此被拒，大家随手打开几个App感受下就不难发现，会这样做的产品少之又少，在不知不觉中就被消费了体验app启动页尺寸要做多大，也许是已经习惯了。不过毕竟咱也不是产品，在下随口说说，诸君随意听听就好 ~