如何实现与参考图样式一致的Bottom Sheet：无背景且宽高随内容自适应

实现方案 #

修改原有代码的几个核心配置即可达到宽高自适应、无背景的效果，核心修改点如下：

• 给showModalBottomSheet新增isScrollControlled: true参数，解除框架默认的Bottom Sheet高度限制，允许高度跟随内容自动适配
• 移除外层Container固定的height属性，让高度由内部元素自然撑开
• 给外层Container添加clipBehavior: Clip.antiAlias属性，保证圆角裁切生效
• 如果需要宽度也不占满全屏、跟随内容自适应，可在外层Container外套一层Align组件自行调整对齐方式和宽度约束

修改后的完整代码如下：

showModalBottomSheet(
  context: context,
  elevation: 0,
  backgroundColor: Colors.transparent,
  // 新增参数解除高度限制
  isScrollControlled: true,
  builder: (context) => Container(
    // 移除固定height属性，由内容撑开高度
    clipBehavior: Clip.antiAlias, // 新增参数保证圆角生效
    decoration: BoxDecoration(
      color: Colors.transparent,
      borderRadius: BorderRadius.only(
        topLeft: const Radius.circular(50.0),
        topRight: const Radius.circular(50.0),
      ),
    ),
    child: Container(
      color: AppColors.grey8,
      padding: EdgeInsets.all(12),
      child: Text("Call Doctor",
        style: TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.w600,
          fontFamily: 'Euclid',
          color: AppColors.textColor,
        ),)
    ),
  ),
);

如果需要宽度也自适应内容，仅需要在外层Container外包裹一层Align即可，示例如下：

builder: (context) => Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    // 原有Container的配置保持不变
  )
)

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