如何在Flutter中设计顶部带半内半外对勾的成功提示弹窗

可以通过Stack布局结合showDialog来实现这种效果，核心是让对勾图标叠加在弹窗容器的顶部，一半露出容器外。以下是完整实现代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("成功弹窗示例")),
        body: Center(
          child: ElevatedButton(
            onPressed: () => _showSuccessDialog(context),
            child: const Text("弹出成功提示"),
          ),
        ),
      ),
    );
  }

  void _showSuccessDialog(BuildContext context) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => Dialog(
        backgroundColor: Colors.transparent,
        insetPadding: const EdgeInsets.symmetric(horizontal: 20),
        child: Stack(
          alignment: Alignment.topCenter,
          clipBehavior: Clip.none,
          children: [
            // 弹窗主体容器
            Container(
              margin: const EdgeInsets.only(top: 30), // 给顶部对勾留出空间
              padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 10,
                    spreadRadius: 2,
                  )
                ],
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Text(
                    "操作成功！",
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  SizedBox(height: 12),
                  Text(
                    "您的请求已提交完成，我们会尽快处理",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 14, color: Colors.black54),
                  ),
                  SizedBox(height: 24),
                  ElevatedButton(
                    onPressed: NavigatorPop,
                    child: Text("确定"),
                  )
                ],
              ),
            ),
            // 顶部半外部对勾图标
            Positioned(
              top: -30, // 让图标一半在容器外
              child: Container(
                width: 60,
                height: 60,
                decoration: const BoxDecoration(
                  color: Colors.green,
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  Icons.check,
                  color: Colors.white,
                  size: 36,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  static void NavigatorPop(BuildContext context) {
    Navigator.of(context).pop();
  }
}

关键实现细节： #

• Dialog背景透明：设置backgroundColor: Colors.transparent，避免默认对话框背景遮挡对勾图标。
• Stack的clipBehavior：设置clipBehavior: Clip.none，允许子组件超出Stack范围显示，这样对勾图标才能露出弹窗外部。
• Positioned定位：通过top: -30将对勾图标向上偏移，刚好一半在弹窗主体容器外（图标尺寸60，偏移-30正好一半在外）。
• 弹窗主体margin：给顶部设置margin: const EdgeInsets.only(top: 30)，避免内部内容被对勾图标遮挡。

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