Flutter应用中移除导航栏底部黑色边框的方法

问题重现 #

使用Flutter官方NavigationBar示例代码（通过flutter create --sample=material.NavigationBar.1 mysample生成），在VS Code中开发，运行在Pixel 6（Android SDK 34）及其他模拟器（Pixel 5、自定义模拟器）、不同SDK版本（12、13）时，底部系统手势导航栏出现黑色边框，与预期的无额外边框效果不符。

示例代码如下：

import 'package:flutter/material.dart';

/// Flutter code sample for [NavigationBar].

void main() => runApp(const NavigationBarApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: NavigationExample());
  }
}

class NavigationExample extends StatefulWidget {
  const NavigationExample({super.key});

  @override
  State<NavigationExample> createState() => _NavigationExampleState();
}

class _NavigationExampleState extends State<NavigationExample> {
  int currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        selectedIndex: currentPageIndex,
        destinations: const <Widget>[
          NavigationDestination(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          NavigationDestination(
            icon: Icon(Icons.commute),
            label: 'Commute',
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.bookmark),
            icon: Icon(Icons.bookmark_border),
            label: 'Saved',
          ),
        ],
      ),
      body: <Widget>[
        Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: const Text('Page 1'),
        ),
        Container(
          color: Colors.green,
          alignment: Alignment.center,
          child: const Text('Page 2'),
        ),
        Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: const Text('Page 3'),
        ),
      ][currentPageIndex],
    );
  }
}

解决方案 #

这个问题是因为Flutter页面默认未延伸到系统导航栏区域，且系统导航栏默认背景与NavigationBar未适配导致，可通过以下步骤修复：

1. 配置系统导航栏样式 #

在main函数中添加SystemChrome配置，设置系统导航栏背景透明，并允许页面内容延伸到导航栏下方：

import 'package:flutter/services.dart'; // 引入系统服务包

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent, // 设置导航栏背景透明
    systemNavigationBarDividerColor: Colors.transparent, // 移除导航栏分割线
    systemNavigationBarIconBrightness: Brightness.dark, // 根据需求设置图标亮度
  ));
  // 允许页面延伸到系统导航栏下方
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const NavigationBarApp());
}

2. 让Scaffold的Body延伸到NavigationBar下方 #

在Scaffold中设置extendBody: true，这样页面内容会延伸到底部NavigationBar下方，避免出现黑色间隙：

return Scaffold(
  extendBody: true, // 添加这一行
  bottomNavigationBar: NavigationBar(
    // 保持原有配置...
  ),
  body: // 保持原有内容...
);

3. 适配NavigationBar背景色（可选） #

如果需要让NavigationBar与页面背景更协调，可以设置NavigationBar的backgroundColor为半透明或者与页面匹配的颜色，比如：

bottomNavigationBar: NavigationBar(
  backgroundColor: Colors.white.withOpacity(0.8), // 半透明背景
  // 其他配置不变...
),

验证效果 #

修改后重新运行应用，底部系统手势栏的黑色边框会消失，NavigationBar与系统导航区域完美融合，符合预期效果。

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