Flutter应用启动页设置,解决 白/黑 屏情况

解决启动白屏或黑屏

出现此情况的原因有两种

1. FlutterView显示第一帧之前，安卓会加载flutter的SDK，将dart代码加载在内存中，过程中android没有可以显示的东西，出现白屏。(android 方面原因)

   
   初始化过程.png

解决:
找到 \app\src\main\res\drawable\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> -->

<!--@drawable/launch_screen就是图片路径 可以在当前同文件夹下 放置要显示的图片-->
     <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_screen" /> 
    </item> 
</layer-list>

或者根据不同手机的分辨率 在mipmap下放置图片例如：

转载.png

之后前往 styles.xml 文件设置启动页

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
<!--        是否全屏显示-->
<!--        <item name="android:windowFullscreen">true</item>-->
<!--        设置启动背景 引入启动页 xml-->
        <item name="android:windowBackground">@drawable/launch_background</item>
<!--        启动时状态栏状态是否透明-->
        <item name="android:windowIsTranslucent">true</item>

    </style>
</resources>

重新打包就可以看到 刚刚设置的启动页了
效果例如：
[图片上传失败...(image-7e5c2-1586668143446)]

2. 从现象观察，启动页中间有一段时间黑屏，这个为什么呢？前面我们说过，Flutter的启动流程分成两部分，一部分是Android启动阶段，一个是Flutter的启动阶段，这个黑屏就是Flutter的启动阶段没有启动页所造成的。我们从源码入手，详细分析一下，下面是FlutterActivityDelegate的部分源码。参考链接
   解决：找到 \app\src\main\AndroidManifest.xml 文件

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutterxc">
    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement-->
    <application
        android:usesCleartextTraffic="true"
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutterxc" //自定义app名称
        android:icon="@mipmap/xc_logo" //自定义app logo
>
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
    // 添加这两段代码 可解决 黑屏问题（出现红线 或者 异常没关系，可以编译成功）
          + <meta-data
          +     android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
          +     android:value="true" />
       // 将资源指向我们的启动页路径
          +  <meta-data
          +     android:name="io.flutter.embedding.android.SplashScreenDrawable"
          +     android:resource="@drawable/launch_background" />

            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

至此可以流畅的打开启动页了