如何将Flutter Snackbar显示在Bottom Navigation Bar下方？

默认情况下，Flutter的Snackbar会显示在BottomNavigationBar上方，因为两者都属于Scaffold的底部组件层级。要实现Snackbar位于导航栏下方的效果，有两种常用方案：

方案一：将BottomNavigationBar放在Scaffold的body中 #

放弃使用Scaffold自带的bottomNavigationBar属性，把导航栏作为body的底部组件。这样Scaffold的Snackbar会默认显示在整个页面的最底部，也就是导航栏的下方。

示例代码：

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text('当前页面：${_selectedIndex == 0 ? "首页" : "设置"}'),
            ),
          ),
          // 自定义底部导航栏，放在body的最下方
          BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
              BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
            ],
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('显示在导航栏下方的Snackbar')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

方案二：使用浮动SnackBar并调整margin #

如果不想改动原有Scaffold结构，依然使用bottomNavigationBar属性，可以给Snackbar设置SnackBarBehavior.floating，并通过margin属性设置底部间距，让它避开导航栏。

示例代码：

// 触发Snackbar的逻辑
void showCustomSnackbar(BuildContext context) {
  // 获取系统默认底部导航栏高度，自定义导航栏需替换为实际高度
  final navBarHeight = kBottomNavigationBarHeight;

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: const Text('显示在导航栏下方的Snackbar'),
      behavior: SnackBarBehavior.floating,
      // 设置底部间距为导航栏高度+额外留白（可根据需求调整）
      margin: EdgeInsets.only(bottom: navBarHeight + 16),
      duration: const Duration(seconds: 2),
    ),
  );
}

两种方案对比 #

• 方案一适配性更强，无需手动计算高度，适合大多数场景；
• 方案二更灵活，适合已有固定Scaffold结构、不想大幅改动的项目，但需要确保导航栏高度的准确性（自定义高度导航栏需传入实际值）。

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