如何在Flutter中创建透明的Material 3 NavigationBar？

你之前的配置缺少了关键的背景色和阴影移除设置，试试下面的完整实现：

Scaffold(
  extendBody: true, // 必须开启，让页面内容延伸到导航栏下方
  bottomNavigationBar: NavigationBar(
    elevation: 0, // 移除导航栏默认阴影，避免视觉上的不透明感
    backgroundColor: Colors.transparent, // 设置导航栏背景完全透明（核心配置）
    surfaceTintColor: Colors.transparent, // 保留你的设置，避免表面色调干扰
    destinations: const [
      NavigationDestination(
        icon: Icon(Icons.home),
        label: '首页',
      ),
      NavigationDestination(
        icon: Icon(Icons.settings),
        label: '设置',
      ),
    ],
  ),
  body: Container(
    // 示例渐变背景，用于验证透明效果
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.cyan, Colors.indigo],
      ),
    ),
  ),
)

关键配置说明： #

• backgroundColor: Colors.transparent：这是实现导航栏透明的核心，仅设置surfaceTintColor无法改变导航栏的基础背景色。
• elevation: 0：移除导航栏自带的阴影，否则阴影会让导航栏看起来有存在感，破坏透明效果。
• extendBody: true：确保页面内容能穿透到导航栏下方，透明后才能看到下方的内容。

如果仍未生效，检查是否有父组件设置了不透明背景，或者导航栏的图标/文字颜色是否适配透明背景（比如浅色背景下使用深色图标）。

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