Flutter自定义弹窗：点击Beranda按钮在底部导航栏上方显示并去深色背景

可行性说明 #

完全可以通过showDialog实现点击「Beranda」按钮后在底部导航栏上方显示弹窗的需求，同时可以通过配置参数去除弹窗的深色背景遮罩。

实现步骤与代码示例 #

核心是通过修改showDialog的关键参数去除深色背景，并调整弹窗位置使其显示在底部导航栏上方：

// 底部导航栏中Beranda按钮的点击事件处理
onTap: () {
  showDialog(
    context: context,
    barrierColor: Colors.transparent, // 移除深色背景遮罩
    builder: (BuildContext context) {
      return Dialog(
        backgroundColor: Colors.white, // 自定义弹窗背景色
        insetPadding: EdgeInsets.only(
          bottom: kBottomNavigationBarHeight, // 弹窗底部与导航栏保持默认导航栏高度的间距
          left: 16,
          right: 16,
        ),
        alignment: Alignment.bottomCenter, // 弹窗对齐屏幕底部
        child: Container(
          padding: const EdgeInsets.all(16),
          height: 180,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text("Beranda弹窗内容"),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: Navigator.pop,
                child: Text("关闭弹窗"),
              ),
            ],
          ),
        ),
      );
    },
  );
},

关键参数说明 #

• barrierColor: Colors.transparent：showDialog默认会在弹窗外部添加半透明黑色遮罩，将该参数设为透明即可完全去除深色背景。
• alignment: Alignment.bottomCenter：将弹窗定位到屏幕底部区域，配合insetPadding的bottom值，确保弹窗显示在底部导航栏上方。
• insetPadding：控制弹窗与屏幕边缘的间距，使用kBottomNavigationBarHeight（Flutter内置的底部导航栏高度常量）可精准避免弹窗被导航栏遮挡。

效果示意图 #

示意图说明：弹窗紧贴底部导航栏上方显示，无周围深色遮罩，弹窗内容清晰可见，不遮挡页面其他区域。

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