使用 barrierColor 自定义 AlertDialog 样式

介绍

AlertDialog 是 Flutter 提供的一个常见的 Material Design 风格的对话框组件。一般情况下，AlertDialog 的背景色是半透明黑色的，这是由一个名为 ModalBarrier 的组件所生成的。通过 barrierColor 属性，我们可以自定义 ModalBarrier 的颜色，从而实现自定义 AlertDialog 样式的效果。

代码示例

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text("示例对话框"),
    content: Text("这是一个示例对话框"),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: Text("取消"),
      ),
      ElevatedButton(
        onPressed: () => Navigator.pop(context),
        child: Text("确定"),
      ),
    ],
    backgroundColor: Colors.white,  // 设置对话框的背景色为白色
    barrierColor: Colors.black54,  // 设置背景遮罩层的颜色为半透明黑色
  ),
);

注意事项

1. barrierColor 属性只对 AlertDialog 风格的对话框有效，在自定义对话框中可能失效。
2. barrierColor 的值应该是带有透明度的颜色，建议使用 Colors.black54 或 Colors.white54 等默认提供的颜色。

效果展示