如何在Flutter中按照参考图实现指定样式的AlertDialog弹窗

CupertinoAlertDialog是系统预置的iOS风格弹窗组件，样式可调整空间极小，无法满足自定义设计需求时，直接使用通用Dialog组件自定义内部布局即可1:1匹配设计效果。

完整实现代码 #

void cruptoalert(){
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) => Dialog(
      // 配置弹窗整体圆角、背景色
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      backgroundColor: Colors.white,
      elevation: 8,
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 顶部图标区域，可替换为自己的设计图标
            const Icon(
              Icons.lock_outline_rounded,
              color: Colors.green,
              size: 48,
            ),
            const SizedBox(height: 20),
            // 标题
            const Text(
              'Accept?',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.black87,
              ),
            ),
            const SizedBox(height: 12),
            // 内容文本
            const Text(
              'Do you accept?',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 15,
                color: Colors.black54,
              ),
            ),
            const SizedBox(height: 32),
            // 底部按钮区域
            Row(
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () => Navigator.pop(context),
                    child: Container(
                      height: 48,
                      decoration: BoxDecoration(
                        color: Colors.grey.shade200,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      alignment: Alignment.center,
                      child: const Text(
                        'No',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                          color: Colors.black87,
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                      alert();
                    },
                    child: Container(
                      height: 48,
                      decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      alignment: Alignment.center,
                      child: const Text(
                        'Yes',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    ),
  );
}

可调整参数说明 #

• 弹窗圆角：修改Dialog的shape属性中BorderRadius.circular的数值
• 颜色：直接修改对应元素的color、backgroundColor属性即可匹配设计稿色值
• 间距：调整SizedBox的高度、Padding的数值即可
• 图标：将顶部Icon组件替换为Image.asset即可加载自定义设计图标

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