Flutter的Android和iOS启动页白屏解决

前言

日常开发原生端的时候android是要在进入主页前加载一个覆盖页作为启动页，ios是要给LaunchScreen配置图片。同理flutter解决白屏的方式也是需要去原生两端配置，让我们看一下Android和ios未解决前的样子
Android未解决白屏展示图

iOS未解决白屏展示图

解决办法

1.Android
在项目下找到android目录，依次进入app==>src==>main==>res==>drawable-v21==>launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

在Android原生中解决白屏的方法可以通过给windowbackground设置值来解决白屏问题，flutter也是以此为解决办法（如以上代码块所示，之所以白屏是因为flutter对此方法是默认注释的。
因此Android改动找到下图两个文件所示

将drawable和drawable-v21中的注释解除，并将第一个item删除

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- You can insert your own image assets here -->
     <item>
        <bitmap
            android:gravity="fill"
            android:src="@mipmap/launch_image" />
    </item>
</layer-list>

Android最终解决后展示效果如下：

2.iOS
由于从2020年起提交至App Store的app，需要使用Xcode的Storyboard搭建启动页。我这边直接展示的LaunchScreen.storyboard实现方法
打开项目所属的ios文件按照以下图片步骤走即可
1.
2.我这里仅做测试demo，故图片只找了一个一倍图

3.
最终ios展示效果如下：

到此完结，如果有疑问请私信我