如何在Android Q手势导航下让Flutter应用实现全屏延伸显示

要实现上述界面中内容穿透底部手势导航栏显示的效果，仅升级Flutter版本无法自动生效，需要同时完成Android原生侧和Flutter层的配置，步骤如下：

1. Android原生侧主题配置 #

修改android/app/src/main/res/values/styles.xml中的App主题，新增以下属性：

<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <!-- 原有配置保留，新增以下内容 -->
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:enforceNavigationBarContrast">false</item>
</style>

如果应用适配了Android 12及以上版本，需要同步修改values-v31目录下的同名文件。

2. Flutter全局系统UI配置 #

在main.dart的入口函数中新增SystemUI配置：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 配置系统栏透明，允许应用内容延伸至系统栏区域
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    navigationBarColor: Colors.transparent,
    // 根据应用主题调整系统栏图标明暗
    systemNavigationBarIconBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.dark,
  ));
  runApp(const MyApp());
}

3. 页面Scaffold属性配置 #

在需要实现延伸效果的页面Scaffold中开启extendBody属性：

Scaffold(
  extendBody: true, // 允许body内容延伸到底部导航栏下方
  // 若需要内容延伸到顶部状态栏下方，可额外开启下方属性
  // extendBodyBehindAppBar: true,
  body: const YourPageContent(),
)

额外适配提示 #

如果页面包含可滚动组件，建议在滚动组件底部添加EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom)的内边距，避免底部交互内容被手势条遮挡。

内容的提问来源于stack exchange，提问作者BeamlakAschalew