[ flutter ] 自定义dialog

自定义my_dialog.dart文件

import "package:flutter/material.dart";

class MyCustomDialog extends Dialog {
  final String title;
  final String content;
  final List<Widget>? footer;

  const MyCustomDialog(
      {super.key, this.title = "标题", required this.content, this.footer});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        type: MaterialType.transparency, // 重点1:  半透明材质
        child: Container(
          width: 360,
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Colors.white,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, // 重点2: 设置主轴最小长度(Column高度最小,不然会默认最大)
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(title,
                      style: const TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                  const Icon(Icons.close)
                ],
              ),
              const SizedBox(height: 16),
              Text("        $content"),
              const SizedBox(height: 16),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: footer ?? [],
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

2. 调用

  void _showMyDialog(BuildContext context) async {
    String result = await showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          return MyCustomDialog(
            title: "自定义标题",
            content: '我是传递过去的参数哈哈哈哈!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!@#!@3',
            footer: [
              TextButton(
                  onPressed: () {
                    Navigator.pop(context, 'cancel');
                  },
                  child: const Text("取消")),
              TextButton(
                  onPressed: () {
                    Navigator.pop(context, 'confirm');
                  },
                  child: const Text("确定"))
            ],
          );
        });
    print(result);
  }

 

3. 核心原理

单独定义一个Widget继承 Dialog, 然后返回的容器作为自定义 dialog 的内容, 调用的时候需要使用 showDialog 的 builder, 返回自定义的 dialog 类的调用