Flutter中如何实现点击按钮弹出带动画的自定义Dialog弹窗

你需要的这种自定义样式弹窗，有两种实现路径，你可以根据自己的需求选：

一、直接使用第三方Package #

不用自己写基础弹窗逻辑，适配工作库已经做好：

• flutter_smart_dialog：目前社区使用最广泛的弹窗库之一，支持完全自定义弹窗布局、动画效果、遮罩配置、全局弹窗管理，不管是简单的提示弹窗还是复杂的交互弹窗都能实现，你只要把你要的UI写成普通Widget传入即可。
• awesome_dialog：自带多种预设的弹窗样式（成功、失败、提示等），也支持完全自定义内容区域，自带常用的进场退场动画，配置简单。

二、用Flutter自带组件原生实现 #

不需要引入第三方依赖，用系统自带的showDialog方法就能实现，示例代码如下：

// 按钮触发弹窗逻辑
ElevatedButton(
  onPressed: () => showCustomDialog(context),
  child: const Text("点击弹出弹窗"),
)

// 自定义弹窗方法
void showCustomDialog(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: true, // 控制点击弹窗外部是否可以关闭
    builder: (BuildContext context) {
      return AlertDialog(
        // 自定义圆角
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
        // 弹窗标题
        title: const Text("提示"),
        // 弹窗内容区域，可替换为任意自定义Widget
        content: const Text("这是弹窗的内容，你可以在这里替换成你需要的任何布局，比如图片、输入框、选项列表等"),
        // 底部操作按钮
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text("取消"),
          ),
          TextButton(
            onPressed: () {
              // 处理确认按钮的逻辑
              Navigator.pop(context);
            },
            child: const Text("确认"),
          ),
        ],
      );
    },
  );
}

如果系统自带的AlertDialog的布局结构满足不了你的设计需求，你可以直接把builder返回的组件替换成你自己写的自定义布局Widget，即可1:1还原你需要的设计效果。

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