Flutter实现Modal Bottom Sheet显示在导航栏上方的问题

要实现点击BottomNavigationBar按钮后，Modal Bottom Sheet显示在导航栏上方且导航栏保持可见，只需调整showModalBottomSheet的参数并设置底部内边距，具体修改如下：

核心修改逻辑 #

• 利用kBottomNavigationBarHeight获取系统默认底部导航栏高度，给Bottom Sheet容器添加底部内边距，避免覆盖导航栏
• 可选设置弹窗背景为透明，配合内部容器的圆角样式，让弹窗视觉上更贴合预期效果

修改后的完整代码 #

BottomNavigationBarItem(
  icon: Container(
    height: 40,
    width: 54,
    decoration: const BoxDecoration(
      color: Colors.orange,
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
    ),
    child: IconButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          backgroundColor: Colors.transparent, // 设为透明以自定义弹窗样式
          isDismissible: true, // 允许点击外部关闭
          enableDrag: true, // 支持拖拽关闭
          builder: (context) => Padding(
            // 底部内边距留出导航栏位置
            padding: EdgeInsets.only(bottom: kBottomNavigationBarHeight),
            child: Container(
              height: 200,
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(16.0),
                  topRight: Radius.circular(16.0),
                ),
              ),
              child: const ListTile(
                leading: Icon(Icons.share),
                title: Text('Share'),
              ),
            ),
          ),
        );
      },
      icon: const Icon(Icons.add_outlined, color: Colors.white),
    ),
  ),
  label: '',
),

关键说明 #

1. 底部内边距：通过EdgeInsets.only(bottom: kBottomNavigationBarHeight)确保弹窗底部与屏幕底部的间距等于导航栏高度，导航栏自然保持可见。
2. 透明背景处理：将showModalBottomSheet的背景设为透明，再给内部容器设置白色背景和顶部圆角，能让弹窗样式更符合常见的设计规范。
3. 交互保留：保留isDismissible和enableDrag参数，保证弹窗的基础交互体验不受影响。

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