Flutter Android项目启动白屏问题

完好代码

白屏现象

首要，咱们运用Android Studio创立一个Flutter项目。运转项目，咱们先会看到先闪过一个白屏，然后再进入计数器页面。

那么问题来了，为什么是白屏，而不是黑屏或许其他颜色呢？

咱们翻开android项目，翻开AndroidManifest.xml能够看到装备发动的主题@style/LaunchTheme，点击翻开styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
  <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <!-- Show a splash screen on the activity. Automatically removed when
       the Flutter engine draws its first frame -->
    <item name="android:windowBackground">@drawable/launch_background</item>
  </style>
</resources>

点击@drawable/launch_background翻开launch_background.xml，能够看到设置的布景为white。

<?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="https://juejin.im/post/7266417942182379579/@mipmap/launch_image" />
  </item> -->
</layer-list>

处理方法

咱们以京东APP为例，通过解压后，找到发动图uh.9.png，该图不能直接运用，将图片拖入绘图后保存运用。

能够看到图片尺寸为718*1278，咱们在res目录下创立drawable-xhdpi文件夹

运用layer-list

运用截图软件，截取发动图中心图片和底部的图片放入drawable-xhdpi，汲取布景颜色#FA2B18

修正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>
    <shape>
      <solid android:color="#FA2B18" />
    </shape>
  </item>
​
  <item android:bottom="100dp">
    <bitmap
      android:gravity="center"
      android:src="@drawable/center" />
  </item>
​
  <item android:bottom="30dp">
    <bitmap
      android:gravity="bottom"
      android:src="@drawable/bottom" />
  </item>
​
</layer-list>

作用

运用.9图

将完好图launch_image.png片放入drawable-xhdpi，点击右键，弹窗选择Create 9-Path file，创立launch_image.9.png，然后删除旧的图片，只保留.9图。

制作原则

1. 上边左右各制作1px，间隔边际至少1px
2. 左面上下制作200px，间隔边际至少1px(取200px的原因：当屏幕显现导航栏时，图片显现的高度变小，能够上下减小图片高度，避免变形)

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
  <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <!-- Show a splash screen on the activity. Automatically removed when
       the Flutter engine draws its first frame -->
    <item name="android:windowBackground">@drawable/launch_image</item>
  </style>
</resources>

作用