Flutter+WebRTC开发点对点加密即时通讯APP--SplashScreen启动屏实现

开篇

基于Flutter+WebRTC，开发一款点对点加密、跨端、即时通讯APP，实现文字、音视频通话聊天，同时支持图片、短视频等文件传输功能，计划支持Windows、Android平台。我准备将自己的学习和实践过程记录下来，同时分享给大家，欢迎大家一起研讨交流。这个工程是利用自己的业余时间来实现的，不定时更新。本篇文章实现APP的SplashScreen启动屏。

SplashScreen启动屏

APP展示给用户的第一个界面就是SplashScreen启动屏界面（闪屏），目前国内APP的启动屏都很丑陋，广告图片满天飞，看得我很是心烦，不想使用一下，所以我不能这样。我们也要给自己的APP来实现一个SplashScreen启动屏界面，必须要美观一点。我们在启动屏放置一个加载可爱动画，来缓解用户等待启动时的焦急心理。我前边的文章《flutter Android SplashScreen 看我如何实现安卓精美的启动页（闪屏）》有详细的设置说明，有兴趣的可以去我主页翻看这篇文章。

我们的思路是先找一个现成lottie动画文件下载下来，然后将动画文件利用AE的插件Bodymovin导入AE中对其进行编辑修改，修改完成后再使用AE的Bodymovin插件将动画文件导出成(AVD) XML文件，最后将(AVD) XML文件导入到flutter的Android的android\app\src\main\res\drawable目录中使用,完成启动屏设置。

动画文件制作

lottie动画文件下载完成后，点击"窗口">"扩展">"Bodymovin"菜单项，使用Bodymovin插件将其导入到AE中：

导入完成后，对其进行编辑和再加工，修改完成后我们再使用Bodymovin插件将其导出成(AVD) XML文件，点击最右边的三个点，选择导出的路径，再点击设置按钮，找到AVD选项，选择并保存，最后点击Render按钮，就可以导出(AVD) XML文件了：

android下的SplashScreen启动屏设置

我们将导出的(AVD) XML文件放入android\app\src\main\res\drawable和drawable-v21目录中:

接着修改android\app\src\main\res\values\styles.xml对闪屏样式进行设置:

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>-->
             <!-- 启动画面中间显示的图标，默认使用应用图标 -->
             <item name="android:windowSplashScreenAnimatedIcon">@drawable/launch_background</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>

完成上述设置后，启动APP，就可以看到效果图了：