如何用Flutter的showCupertinoModalBottomSheet实现卡片覆盖效果？

你遇到的问题是单次调用showCupertinoModalBottomSheet时弹窗全屏显示，而非预期的卡片覆盖效果。无需调用两次方法，调整几个关键参数即可解决：

核心修改点 #

• expand: false：强制弹窗根据内容高度自适应，而非占满整个屏幕
• backgroundColor: Colors.transparent：让弹窗背景透明，透出默认的半透明遮罩层
• 给弹窗内容套圆角容器：实现卡片的圆角视觉效果

修改后的完整代码 #

if (context.mounted) {
  showCupertinoModalBottomSheet(
    context: context,
    enableDrag: true,
    expand: false, // 关闭全屏展开
    backgroundColor: Colors.transparent, // 背景透明
    builder: (context) => Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      child: MyVerification(
        verificationUri: verificationUri,
      ),
    ),
  );
}

可选优化：添加背景模糊 #

如果想要类似iOS原生的背景模糊效果，可以在外层嵌套BackdropFilter：

builder: (context) => BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
  child: Container(
    decoration: const BoxDecoration(
      color: Colors.white.withOpacity(0.95),
      borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
    ),
    child: MyVerification(verificationUri: verificationUri),
  ),
),

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