如何让showModalBottomSheet中的顶部图片溢出显示？

要实现图片一半溢出showModalBottomSheet弹窗、一半位于弹窗内部的效果，核心要解决弹窗默认裁剪溢出内容的问题，再通过布局定位实现图片位置，具体步骤如下：

关键修改点 #

1. 取消弹窗裁剪：给showModalBottomSheet设置clipBehavior: Clip.none，默认的Clip.hardEdge会裁剪掉所有超出弹窗边界的内容，这是你之前红色Container无法溢出的根本原因。
2. 用Stack+Positioned定位图片：把弹窗主体内容和溢出图片放在Stack中，通过Positioned将图片向上偏移自身高度的一半，实现半溢出效果。
3. 调整弹窗内边距：弹窗主体需要设置顶部margin，避免内部内容被溢出的图片遮挡。

完整代码示例 #

showModalBottomSheet(
  context: context,
  clipBehavior: Clip.none, // 允许内容溢出弹窗边界
  isScrollControlled: true, // 可选：如果弹窗内容过长需要滚动时开启
  builder: (context) {
    const imageSize = 80.0;
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        // 弹窗主体容器
        Container(
          margin: EdgeInsets.only(top: imageSize / 2), // 给溢出图片留顶部空间
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
          height: 400,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              topRight: Radius.circular(20),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text(
                "弹窗标题",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 16),
              Text("这里是弹窗的正文内容区域，不会被上方的溢出图片遮挡"),
              // 其他内容组件
            ],
          ),
        ),
        // 半溢出的红色容器/图片
        Positioned(
          top: -imageSize / 2, // 向上偏移一半高度，实现半溢出
          child: Container(
            width: imageSize,
            height: imageSize,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(imageSize / 2),
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  blurRadius: 8,
                  offset: Offset(0, 2),
                )
              ],
            ),
          ),
        ),
      ],
    );
  },
);

额外注意事项 #

• 如果弹窗需要支持滚动，确保Stack作为弹窗的根组件，滚动组件（如SingleChildScrollView）放在弹窗主体容器内部，避免图片随滚动移动。
• 可以根据需求调整图片的大小、圆角、阴影等样式，实现更贴合设计的效果。

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