Flutter实战（一）---闪屏（启动）页面的实现

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

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

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

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

Android端

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

       
   
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@android:color/white"/>
   
       
       <item>
           <bitmap
               android:gravity="center"
               android:src="@drawable/splash_screen"/>
       item>
   layer-list>
   

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

   
   <resources>
       <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
           
           "android:windowBackground">@drawable/launch_background
       style>
   resources>
   

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

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

   完整的配置如下：

           <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">
            
            <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种分辨率图片，对应替换即可。