flutter

闪屏（启动）页面的实现

很多app启动之后都会出现一个splash启动界面，显示广告信息或产品的LOGO、公司的LOGO或者开发者信息。如果应用程序启动时间比较长，那么启动界面就是一个很好的东西，可以让用户耐心等待这段枯燥的时间。

那么，我们使用Flutter开发应用该怎么实现闪屏页面呢？

有两种方案可以实现：第一种，平台无关，在dart main函数里将启动页面作为第一个显示页面，设置一个定时器，定时显示多少秒后跳转到主页面；第二种，Android和IOS各个平台模块配置闪屏资源，因为应用名称和Logo都是需要各个平台自己定义的，我们可以不用单独实现一个界面，而是按照官方指导，进行一下资源配置就完事儿了。

本篇就是采用第二种方案实现Flutter应用启动闪屏效果。

Android端

图片资源里放置一个用作启动logo的图片：splash_screen.png
drawable资源里定义一个xml文件作为启动背景，引用步骤1的图片：launch_background.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?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="@drawable/splash_screen"/>
    </item>
</layer-list>

values/styles.xml资源里定义一个启动主题，引用步骤2的背景：

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <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:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

在文件清单中，配置启动Activity的主题为步骤3定义的主题，同时配置meta-data：

1
2
3
<meta-data
    android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
    android:value="true" />

完整的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   <activity
    android:name=".MainActivity"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
    android:hardwareAccelerated="true"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:windowSoftInputMode="adjustResize">
    <!-- This keeps the window background of the activity showing
         until Flutter renders its first frame. It can be removed if
         there is no splash screen (such as the default splash screen
         defined in @style/LaunchTheme). -->
    <meta-data
        android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
        android:value="true" />
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

完成上述4个步骤，Android平台的闪屏效果就实现了，下面再看IOS平台的实现过程

IOS端

IOS的闪屏页实现就非常简单了，直接将Runner/Assets.xcassets/LaunchImage.imageset下的图片替换成我们的启动logo图片就可以了：

一般设置了3种分辨率图片，对应替换即可。

注：在flutter 1.12中，io.flutter.app.android.SplashScreenUntilFirstFrame被io.flutter.embedding.android.SplashScreenDrawable替代。

参考：
向 Android 应用中添加闪屏页和启动页
Flutter Android 1.12 迁移指南