Flutter如何在同一屏幕中实现指定样式的弹出对话框

本方案基于Flutter原生组件实现，无需引入第三方依赖，可直接复用：

1. 弹窗触发方法 #

在需要弹出弹窗的位置调用如下方法：

void _triggerCustomDialog(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: true, // 点击蒙层区域可关闭弹窗，不需要可设为false
    builder: (context) => const CustomConfirmDialog(),
  );
}

2. 自定义弹窗Widget实现 #

import 'package:flutter/material.dart';

class CustomConfirmDialog extends StatelessWidget {
  const CustomConfirmDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.white,
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 顶部图标
            const Icon(
              Icons.warning_rounded,
              color: Colors.red,
              size: 64,
            ),
            const SizedBox(height: 16),
            // 弹窗标题
            const Text(
              '确认操作',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
              ),
            ),
            const SizedBox(height: 12),
            // 提示文案
            const Text(
              '该操作不可撤销，确认要继续执行吗？',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 14,
                color: Colors.grey,
                height: 1.5,
              ),
            ),
            const SizedBox(height: 32),
            // 操作按钮组
            Row(
              children: [
                Expanded(
                  child: OutlinedButton(
                    style: OutlinedButton.styleFrom(
                      padding: const EdgeInsets.symmetric(vertical: 12),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                      side: const BorderSide(color: Colors.grey),
                    ),
                    onPressed: () => Navigator.pop(context),
                    child: const Text(
                      '取消',
                      style: TextStyle(color: Colors.black87, fontSize: 15),
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.symmetric(vertical: 12),
                      backgroundColor: Colors.red,
                      elevation: 0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    onPressed: () {
                      // 这里填写你的确认操作逻辑
                      Navigator.pop(context);
                    },
                    child: const Text(
                      '确认',
                      style: TextStyle(color: Colors.white, fontSize: 15),
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

样式自定义说明 #

• 顶部图标可替换为自定义Image组件，调整尺寸、颜色即可匹配设计要求
• 按钮文字、颜色、圆角参数均可直接调整对应属性修改
• 可通过调整Padding参数修改弹窗的内边距，适配不同尺寸需求

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