Flutter 安卓端启动页全屏+沉浸式状态栏_flutter全屏背景图 沉浸式

对酒当歌，人生几何。——曹操 

随着Flutter的兴起，移动端开发又简洁很多啦。不管怎么变，我们还是可以实现我们想要的效果

       开发中常见的就是欢迎页启动要全屏，首页需要显示为沉浸式状态栏。效果大致如下：

 有原生开发基础的同时，我们需要UI设计给我们设计低、中、高、超高、超超高分辨率的图片放置在创建工程文件的不同目录下；分别对应（drawable、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi）

1、设置启动页样式，防止启动页黑屏：

 <activity
            android:name=".SplashActivity"
            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>

2、设置MainActivity页样式，防止导航到该页面黑屏：

 

 <activity
            android:name=".MainActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchThemeMain"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
 
        </activity>

3、样式：

适配安卓5.0以下样式放置在values文件夹下

适配安卓5.0-9.0的样式放置在values-v21文件夹下

适配安卓9.0以上的样式放置在values-v28文件夹下

values文件夹下styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--SplashActivity样式-->
    <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>
        <item name="android:windowFullscreen">true</item>//全屏即无通知栏
    </style>
    <!--MainActivity样式-->
    <style name="LaunchThemeMain" 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>
        <item name="android:windowFullscreen">false</item>//全屏即无通知栏
    </style>
</resources>

values-v21文件夹styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--SplashActivity样式-->
    <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>
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <item name="android:windowFullscreen">true</item>//全屏即无通知栏
    </style>
    <!--MainActivity样式-->
    <style name="LaunchThemeMain" 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>
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <item name="android:windowFullscreen">false</item>//全屏即无通知栏
    </style>
</resources>

values-v28文件夹下styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--SplashActivity样式-->
    <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>
        <!--<item name="android:windowFullscreen">true</item>-->
        <!--不让windowBackground延申到navigation bar区域-->
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <!--适配Android P刘海屏-->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowFullscreen">true</item>//全屏即无通知栏
    </style>
    <!--MainActivity样式-->
    <style name="LaunchThemeMain" 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>
        <!--<item name="android:windowFullscreen">true</item>-->
        <!--不让windowBackground延申到navigation bar区域-->
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <!--适配Android P刘海屏-->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowFullscreen">false</item>//全屏即无通知栏
    </style>
</resources>

4、导航到Flutter MyApp后希望能看到沉浸式状态栏， MyApp继承自StatelessWidget（是不可变的，所有的值是最终的）。

所以选择沉浸式属性的初始化在StatelessWidget中build 函数下。

 if (Platform.isAndroid) {
      SystemUiOverlayStyle systemUiOverlayStyle =
          SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    }

下载资源

参考：

支持不同像素密度：https://developer.android.google.cn/training/multiscreen/screendensities#java

SystemChrome：https://www.jianshu.com/p/540dccbd5a51