Flutter中如何在Modal Bottom Sheet上方显示SnackBar

要解决SnackBar显示在Modal Bottom Sheet后方，同时保持底部表单固定高度的问题，你可以通过以下方式调整代码：

核心修改点 #

1. 保留Modal Bottom Sheet内的Scaffold（确保SnackBar能正确附着在当前上下文），但将其背景设为透明，避免覆盖底部表单的圆角样式。
2. 移除导致表单撑满全屏的Stack和Positioned，改用Align将内容固定在屏幕底部。
3. 用Container包裹表单内容，通过maxHeight约束底部表单的高度，同时保留isScrollControlled: true以适配键盘弹出场景。

修改后的完整代码 #

onPressed: () {
  showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    backgroundColor: Colors.transparent, // 让底层sheet背景透明，显示圆角
    builder: (BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.transparent, // Scaffold背景透明，不遮挡圆角
        body: Align(
          alignment: Alignment.bottomCenter,
          child: SingleChildScrollView(
            child: AnimatedPadding(
              padding: MediaQuery.of(context).viewInsets,
              duration: const Duration(milliseconds: 100),
              curve: Curves.decelerate,
              child: Container(
                constraints: BoxConstraints(
                  maxHeight: MediaQuery.of(context).size.height * 0.7, // 自定义最大高度，比如屏幕的70%
                ),
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Theme.of(context).scaffoldBackgroundColor,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25),
                    topRight: Radius.circular(25),
                  ),
                ),
                child: AddContactSection(myUID: myUID),
              ),
            ),
          ),
        ),
      );
    },
  );
},

关键细节说明 #

• showModalBottomSheet的backgroundColor设为透明，配合Scaffold的透明背景，能保留顶部圆角的视觉效果。
• Container的maxHeight可以根据需求调整（比如0.6对应屏幕60%高度），既限制表单高度，又允许内容超出时滚动。
• 保留isScrollControlled: true和AnimatedPadding，确保键盘弹出时表单能自动上移，避免被遮挡。

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