如何消除Flutter中showModalBottomSheet左上角和右上角的平边

下面是几种针对不同场景的有效解决办法，覆盖常见的平边成因：

1. 透明背景+Container圆角+裁剪（通用方案） #

默认弹窗自带背景层，即使子Widget加了圆角，底层背景会从边角透出形成平边。通过以下步骤解决：

showModalBottomSheet(
  context: context,
  // 移除默认背景，避免底层透出
  backgroundColor: Colors.transparent,
  // 开启裁剪，确保圆角生效
  clipBehavior: Clip.antiAlias,
  builder: (context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      padding: const EdgeInsets.all(16),
      child: const Text('弹窗内容'),
    );
  },
);

2. 直接使用shape属性（Flutter 2.0+） #

新版本Flutter支持通过shape参数直接定义弹窗形状，无需嵌套Container：

showModalBottomSheet(
  context: context,
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
  ),
  builder: (context) {
    return const Padding(
      padding: EdgeInsets.all(16),
      child: Text('弹窗内容'),
    );
  },
);

如果仍有平边，检查是否存在父级Widget的padding或默认inset遮挡圆角。

3. 适配键盘/消除默认inset #

当弹窗包含输入框或存在默认边距时，圆角可能被截断，开启isScrollControlled并适配viewInsets：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return Padding(
      padding: MediaQuery.of(context).viewInsets,
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        padding: const EdgeInsets.all(16),
        child: const Text('弹窗内容'),
      ),
    );
  },
);

4. 检查主题配置冲突 #

若App全局主题中设置了BottomSheetThemeData，可能覆盖弹窗样式，确保主题配置与弹窗圆角一致：

// 在MaterialApp的theme中配置
ThemeData(
  bottomSheetTheme: const BottomSheetThemeData(
    backgroundColor: Colors.transparent,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        topRight: Radius.circular(20),
      ),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Moulik Gupta 50