flutter Android SplashScreen 看我如何实现安卓精美的启动页（闪屏）

 实现App的第一步要先实现一个欢迎界面。每次打开APP的时候欢迎界面基本上都是广告，广告就算了，还无比的丑陋，我肯定是不能忍受的，那么我们就学习一下安卓下的启动页制作。

1 、Android 12 以下启动闪屏

 打开android\app\src\main\res\drawable\launch_background.xml对启动页背景进行设置。

 将注释<!--去掉，android:src="@mipmap/launch_image"就是你设置背景图片的位置。将你想要的启动页图片的名字设置为launch_image,然后放到drawable文件下，启动页就设置好啦。然而，并没有那么顺利，我运行的时候出错了。

 原来是因为启动页背景图片必须是png图片，我放的是jpeg图片，所以不行。换一个png图片再试试。然后成功的再次报错。。。。

 经过一番查询，终于不再报错了。首先修改android\app\src\main\AndroidManifest.xml添加如下代码：

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"
 />

 然后将android\app\src\main\res\drawable\launch_background.xml和android\app\src\main\res\drawable-v21\launch_background.xml中的注释<!--去掉，然后修改代码为：

  <item>
        <bitmap
            android:gravity="fill"
            android:src="@mipmap/launch_image" />
    </item> 

 接着将launch_image.png放入mipmap-hdpi中，现在启动就可以看到启动页了。

 效果图：

 可以看出来，还是有问题的，启动页前还是有默认的页面。同时会有提示A splash screen was provided to Flutter, but this is deprecated. See flutter.dev/go/android-splash-migration for migration steps.，翻译一下：Flutter提供了一个启动屏幕，但这是不推荐的。有关迁移步骤，请参阅flutter.dev/go/android-splash-migration。，那么我们就去这个地方看看吧，原来在Flutter 2.5以后已经弃用了这个方法。

2、Android 12 SplashScreen 安卓12以上闪屏

 在 Android 中，你有两个可以分开控制的页面：在 Android 应用初始化时的启动页，以及在 Flutter 初始化时的 闪屏页。从 Flutter 2.5 开始，启动屏幕和闪屏页已经被合并。 Flutter 现在只会实现 Android 启动屏幕，它会一直显示到框架绘制的第一帧。从 Android 12 开始，在搭载 Android 12 或更高版本的设备上运行时，所有应用都将拥有启动动画。这包括启动时的进入应用动作、显示应用图标的启动画面，以及向应用本身的过渡。默认情况下，SplashScreen 使用主题的 windowBackground和启动器图标，通过向应用主题添加属性来完成启动画面的自定义。从 Android 12开始，必须有一个带图标的默认启动页面，无法更改，但是，我们可以美化这个启动页面,我们可以对android\app\src\main\res\values\styles.xml进行设置。

 使用 windowSplashScreenAnimatedIcon 替换起始窗口中心的图标。如果该对象可通过 AnimationDrawable 和 AnimatedVectorDrawable 呈现动画效果和进行绘制，那么您还需要设置 windowSplashScreenAnimationDuration，以在显示起始窗口的同时播放动画。

 使用 windowSplashScreenAnimationDuration 指示启动画面图标动画的时长。设置该时长对显示启动画面的实际时间不会产生任何影响，但您可以在自定义启动画面退出动画时使用SplashScreenView#getIconAnimationDuration 检索图标动画的时长。<item name="android:windowSplashScreenAnimationDuration">1000</item>

 使用 windowSplashScreenIconBackgroundColor 设置启动画面图标后面的背景。当窗口背景与图标之间的对比度不够高时，这很有用。<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

 您可以使用 windowSplashScreenBrandingImage 设置要显示在启动画面底部的图片。设计准则建议不要使用品牌图片。<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

 我们在android\app\src\main\res\values\styles.xml中设置<item name="android:windowSplashScreenAnimatedIcon">@drawable/news_avd_v02</item>放入一个动画，news_avd_v02是动画形式的矢量可绘制对象 (AVD) XML文件，必须是这样的格式才能正确显示。我们也可以放置一个Gif作为开始动画。

 效果图：

3、AE 与 BODYMOVIE 使用方法，导出AVD（xml）动画

 上边在启动页导入gif动画后感觉效果不是很好，动画不是很流畅，那我们就自己制作一个(AVD) XML文件动画来吧，使用XML文件的话，感觉会流畅很多。AE（Adobe After Effects）是视频后期特效和动画制作的行家，结合插件Bodymovin可以导出xml文件格式动画，现在开始学习使用AE和Bodymovin吧。首先下载AE，大家要支持正版哦，不建议去百度搜索破解版使用。下载安装完AE，再下载一个Bodymovin插件，到GitHub的下载Bodymovin，插件地址：github.com/bodymovin/b…，在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，为了安装bodymovin.zxp，还需要下载ZXP Installer，地址：aescripts.com/learn/zxp-i…，双击打开软件，点击“File”>“Open”菜单项载入上述bodymovin.zxp插件包，ZXP Installer会自动开始安装。打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。

 开始点进这个界面，Render按钮是灰色的，需要做三件事情：找到并选择需要渲染的合成，点击最右边的三个点，选择导出的路径，点击设置按钮，找到AVD选项，选择并保存。此时回到外面Render按钮就可以点击了，点击就可以渲染了。在刚刚选择的路径找到渲染完成的AVD，直接拖进Android项目使用。

 接下来使用AE制作一个载入动画图片吧。我们先下载一个lottie动画，使用bodymovin插件导入到AE中进行设置和修改制作。

 导入json文件：

 编辑动画：

 导出AVD xml文件：

 如果列表中没有你的项目，就点击refresh list刷新一下列表，然后选中selected，再点击列表后边三个小点，指定要导出的路径，最后点击render即可。

 将导出的AVD xml动画文件放入flutter的Android的android\app\src\main\res\drawable目录中使用。

 修改android\app\src\main\res\values\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:windowSplashScreenAnimatedIcon">@drawable/data</item>
         <!-- 启动画面底部的图片。 -->
         <item name="android:windowSplashScreenBrandingImage">@drawable/launch_background</item>
         <!-- 启动画面背景色。 -->
        <item name="android:windowSplashScreenBackground">@android:color/black</item>
         <!-- 启动画面在关闭之前显示的时长。最长时间为 1000 毫秒。 -->
       <item name="android:windowSplashScreenAnimationDuration">1000</item> 
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

 效果图：

4、总结

 实现到现在，我发现，虽然Flutter是跨平台框架，但是并不像我想的那样，只会Flutter知识就可以了，还需要掌握Android和IOS以及其他平台的相关知识，是我太天真了。