Flutter项目配置-4-闪屏页配置

建议先将Flutter官方文档过一遍，本系列教程 Flutter SDK >= 3.10.0

一、Flutter沉浸式状态栏

根据个人需要将此代码添加到指定位置，我这里是将此代码添加到全局main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lhdht_flutter_app/app.dart';

void main() {
  // 沉浸式状态栏
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.transparent));

  runApp(const AppEntrance());
}

二、强制竖屏/横屏

闪屏页则是需要修改android/app/src/main/AndroidManifest.xml

• 横屏 landscape
• 竖屏 portrait

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="梨花炖海棠"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize"
            android:screenOrientation="portrait"
            >
            
            
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme"
                />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            intent-filter>
        activity>
        
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    application>
manifest>

强制横竖屏必须要加WidgetsFlutterBinding.ensureInitialized();不然会报错

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lhdht_flutter_app/app.dart';

void main() {
  // 不加这个强制横/竖屏会报错
  WidgetsFlutterBinding.ensureInitialized(); 
  // 强制竖屏
  SystemChrome.setPreferredOrientations([     
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);
  // 强制横屏
  // SystemChrome.setPreferredOrientations([
  //  	DeviceOrientation.landscapeLeft,
  //	DeviceOrientation.landscapeRight
  // ]);

  runApp(const AppEntrance());
}

三、Android 闪屏页（适配暗色）

闪屏页如果不是定制化的，可以直接使用flutter_native_splash

创建自定义颜色资源文件 Android/app/src/main/res/values/colors.xml

<resources>
    <color name="darkTheme">#333333color> // 深色闪屏背景颜色
    <color name="normalTheme">#ffffffcolor> // 默认闪屏背景颜色
resources>

创建自定义背景, 深色Android/app/src/main/res/drawable/dark_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/darkTheme" />

    
    <item
        android:top="650dp"
        android:width="120dp"
        android:height="120dp"
        android:gravity="center_horizontal"
        android:drawable="@drawable/splash_footer_black"> // 这里是自定义的图片，尺寸一定要把握好
    item>
layer-list>

修改Android/app/src/main/res/drawable/launch_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/normalTheme" />

    
    <item
        android:top="650dp"
        android:width="120dp"
        android:height="120dp"
        android:gravity="center_horizontal"
        android:drawable="@drawable/splash_footer_white"> // 这里是自定义的图片，尺寸一定要把握好
    item>
layer-list>

生成对应的图片资源

修改 Android/app/src/main/res/drawable/values/styles.xml

<resources>
    
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        
        "android:windowBackground">@drawable/launch_background
        "android:windowFullscreen">true // 全屏就没有通知栏了
    style>
    <style name="LaunchThemeMain" parent="@android:style/Theme.Light.NoTitleBar">
        
        "android:windowBackground">@drawable/launch_background
        "android:windowFullscreen">false // 这里是在flutter开始渲染的时候，退出全屏
    style>

    
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        "android:windowBackground">?android:colorBackground
    style>
resources>

修改 Android/app/src/main/res/drawable/values-night/styles.xml，这里就是深色主题

<resources>
    
    
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        
        "android:windowBackground">@drawable/dark_background
        
        "android:windowFullscreen">true
    style>
    
    <style name="LaunchThemeMain" parent="@android:style/Theme.Black.NoTitleBar">
        
        "android:windowBackground">@drawable/dark_background
        
        "android:windowFullscreen">false
    style>

    
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        "android:windowBackground">?android:colorBackground
    style>
resources>

适配刘海屏、异形屏

<resources>
    
    
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        
        "android:windowBackground">@drawable/launch_background
        
        "android:windowDrawsSystemBarBackgrounds">false
        
        "android:windowLayoutInDisplayCutoutMode">shortEdges
        
        "android:windowFullscreen">true
    style>
    
    <style name="LaunchThemeMain" parent="@android:style/Theme.Light.NoTitleBar">
        
        "android:windowBackground">@drawable/launch_background
        
        "android:windowDrawsSystemBarBackgrounds">false
        
        "android:windowLayoutInDisplayCutoutMode">shortEdges
        
        "android:windowFullscreen">false
    style>

    
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        "android:windowBackground">?android:colorBackground
    style>
resources>

android 11 以上只能添加纯色背景 中央图标 底部品牌标识，编译时启动页会空白，但是从模拟器重启时是没问题的

四、IOS 闪屏页（适配暗色）