第三章、flutter项目启动时有一段时间出现白屏怎么办？

笔者刚开始开发一个demo项目时，发现自己什么也没写还是出现启动时白屏一段时间的情况，这种在原生android和ios项目几乎是不可能出现的。那么到底为什么会出现这种情况呢？

原因：

由于flutter是用底层内核Skia图形引擎进行图形绘制，内核在初始化时需要花费一些时间，因此会出现白屏。

解决方案：

andoroid端：

在AndroidManifest.xml清单文件，配置启动页时配置启动theme：

android:theme="@style/LaunchTheme"

如下面配置：

复制代码

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:launchMode="singleTop"
    android:taskAffinity=""
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <!-- Specifies an Android theme to apply to this Activity as soon as
         the Android process has started. This theme is visible to the user
         while the Flutter UI initializes. After that, this theme continues
         to determine the Window background behind the Flutter UI. -->
                <meta-data
                  android:name="io.flutter.embedding.android.NormalTheme"
                  android:resource="@style/NormalTheme"
                  />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

在styles.xml文件中新建

复制代码

<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>
    <item name="android:windowFullscreen">true</item>
</style>

这里指定windowBackground未launch_background

在drawable和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" />-->
    <item android:drawable="@android:color/white" />
    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="fill"
            android:src="@mipmap/launch_image" />
    </item>
</layer-list>

新增launch_image.png图片文件，记得图片文件需要适配不同分辨率。

ios端：

在 ios/Runner/Assets.xcassets/LaunchImage.imageset 中设置启动图片。

另外还有一种方法：

使用 flutter_native_splash 包（最方便）

yaml

复制代码

dev_dependencies:
  flutter_native_splash: ^2.0.0

添加配置文件 flutter_native_splash.yaml：

yaml

复制代码

flutter_native_splash:
  color: "#42a5f5"
  image: assets/splash.png
  android: true
  ios: true

运行命令生成启动页：

bash

复制代码

flutter pub get
flutter pub run flutter_native_splash:create

但这种方法，我这边试下来不成功，不知道为什么，如果哪位大拿知道可以告诉我哈！