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

梨花炖海棠

已于 2023-05-31 09:15:45 修改

阅读量646

点赞数 2

分类专栏： flutter 文章标签： flutter

于 2023-05-29 09:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_44531811/article/details/130870319

版权

flutter 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

建议先将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"
            >
            <!-- 横屏landscape，竖屏portrait -->
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <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>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="darkTheme">#333333</color> // 深色闪屏背景颜色
    <color name="normalTheme">#ffffff</color> // 默认闪屏背景颜色
</resources>

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

<?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="@color/darkTheme" />

    <!-- You can insert your own image assets here -->
    <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

<?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="@color/normalTheme" />

    <!-- You can insert your own image assets here -->
    <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

<?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
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">true</item> // 全屏就没有通知栏了
    </style>
    <style name="LaunchThemeMain" parent="@android:style/Theme.Light.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> // 这里是在flutter开始渲染的时候，退出全屏
    </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>

修改 Android/app/src/main/res/drawable/values-night/styles.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 on -->
    <!--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/dark_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/dark_background</item>
        <!--全屏即无通知栏-->
        <item name="android:windowFullscreen">false</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.Black.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

适配刘海屏、异形屏

<?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 -->
    <!--SplashActivity样式-->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</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.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</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>

    <!-- 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>