Flutter：Container无法延伸至底部系统导航栏/凹槽的解决方法

我写了一个简单的Flutter应用，代码如下：

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red);
  }
}

这个Container能正常覆盖顶部状态栏，但无法覆盖底部系统凹槽（底部存在未被红色填充的区域）。

我尝试了以下方案，但没有效果：

return MaterialApp(
   home: Scaffold(
      extendBody: true,
      body: Container(color: Colors.red),
   ),
);

我的Flutter环境信息：

[✓] Flutter (Channel stable, 3.22.0, on macOS 14.1 23B2073 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.3)
[✓] Connected device (4 available)
[✓] Network resources

解决方案 #

要让Container覆盖底部系统凹槽，可通过以下几种方式实现：

方案1：移除底部内边距 #

使用MediaQuery.removePadding直接移除系统自动添加的底部内边距：

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removePadding(
      context: context,
      removeBottom: true,
      child: Container(color: Colors.red),
    );
  }
}

方案2：关闭底部安全区域 #

如果使用Scaffold，可以通过SafeArea关闭底部安全区域的限制：

return MaterialApp(
  home: Scaffold(
    body: SafeArea(
      bottom: false,
      child: Container(color: Colors.red),
    ),
  ),
);

方案3：全屏模式隐藏系统UI #

若需要完全全屏显示，可设置系统UI模式：

import 'package:flutter/services.dart';

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    return Container(color: Colors.red);
  }
}

补充说明 #

Scaffold的extendBody: true属性作用是让内容延伸到底部导航栏（如BottomNavigationBar）下方，而非覆盖系统凹槽，所以单独设置该属性无法解决问题。

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