Flutter——弹窗

• AlertDialog

showDialog中return AlertDialog，将事件async修饰，await接受异步结果，将点击结果使用Navigator.of(context).pop
("结果")传回
AlertDialog //普通弹窗
title  //标题
barrierDismissible: false,  //点击蒙层是否取消弹窗
content //提示文本信息
actions[]  //执行事件

example:
ElevatedButton(
  onPressed: _alertDialog,
  child: const Text("alert弹出框-AlertDialog")),
void _alertDialog() async {
    var resoult = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text("提示信息！"),
            content: const Text("您确定要删除信息吗？"),
            actions: [
              TextButton(
                  onPressed: () {
                    // print("Ok");
                    Navigator.of(context).pop("ok");
                  },
                  child: const Text("确定")),
              TextButton(
                  onPressed: () {
                    // print("CANCEL");
                    Navigator.of(context).pop("CANCEL");
                  },
                  child: const Text("取消"))
            ],
          );
        });
    print(resoult);
  }

• SimpleDialog

showDialog中return SimpleDialog，将事件async修饰，await接受异步结果，将点击结果使用Navigator.of(context).pop
("结果")传回
SimpleDialog //选择弹窗
title //标题
barrierDismissible: false,  //点击蒙层是否取消弹窗
children[  
    SimpleDialogOption(  //配置选项
         onPressed: () {
             Navigator.pop(context, "中文");
         },
         child: const Text("中文"),
    }
]
example:
void _simpleDialog() async {
    var resoult = await showDialog(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: const Text("请选择语言！"),
          children: [
            SimpleDialogOption(
              onPressed: () {
                // print("中文");
                Navigator.pop(context, "中文");
              },
              child: const Text("中文"),
            ),
            const Divider(),
            SimpleDialogOption(
              onPressed: () {
                // print("英文");
                Navigator.pop(context, "英文");
              },
              child: const Text("英文"),
            ),
            const Divider(),
            SimpleDialogOption(
              onPressed: () {
                // print("日文");
                Navigator.pop(context, "日文");
              },
              child: const Text("日文"),
            ),
            const Divider(),
          ],
        );
      },
    );
    print(resoult);
  }

• showModalBottomSheet

showModalBottomSheet() 底部弹窗
example:
void _modelBottomSheet() async {
    var resolut = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 250,
            child: Column(
              children: [
                ListTile(
                  title: const Text("分享"),
                  onTap: () {
                    Navigator.pop(context, "分享");
                  },
                ),
                const Divider(),
                ListTile(
                  title: const Text("收藏"),
                  onLongPress: () {
                    Navigator.pop(context, "收藏");
                  },
                ),
                const Divider(),
                ListTile(
                  title: const Text("取消"),
                  onTap: () {
                    Navigator.pop(context, "取消");
                  },
                ),
                const Divider(),
              ],
            ),
          );
        });
    print(resolut);
  }

• 插件Toast pub.dev/packages/fl…

在pubspec.yaml文件中使用fluttertoast: ^8.2.2，终端执行 flutter pub get ，可能报错，报错后执行flutter clean
,重新执行
dependencies: 
    fluttertoast: ^8.2.2
example：
Fluttertoast.showToast(
   msg: "toast弹窗！",
   toastLength: Toast.LENGTH_SHORT,
   gravity: ToastGravity.TOP,
   timeInSecForIosWeb: 1,
   backgroundColor: Colors.blue,
   textColor: Colors.white,
   fontSize: 16.0);

• 自定义Dialog

1、首先定义一个类继承Dialog，类里面三个属性，定义标题、文本、和事件
2、重写Widget 执行build,build里面return Material
3、Material 里面定义样式
    type: MaterialType.transparency //背景蒙层
    child: Center //必须包裹这个，否则Container定义的高宽不生效默认全屏
4、使用：
    1、文件里面引入封装的MyDialog
    2、void _myDialog() async {
    var resolut = await showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          return MyDialog(
            title: "危险提示",
            content: "请确认是否危险",
            onTap: () {
              Navigator.pop(context,"我他么自己关闭了！");
            },
          );
        });
    print(resolut);
  }
5、附上代码：
class MyDialog extends Dialog {
  final String title;
  final String content;
  final Function()? onTap;
  const MyDialog(
      {super.key,
      required this.title,
      required this.content,
      required this.onTap});
  @override
  Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: Center(
          child: Container(
            height: 240,
            width: 240,
            color: Colors.white,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(6),
                  child: Stack(
                    children: [
                      Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          title,
                          style: const TextStyle(fontSize: 18),
                        ),
                      ),
                      Align(
                        alignment: Alignment.topRight,
                        child: InkWell(
                          onTap: onTap,
                          child: const Icon(Icons.close),
                        ),
                      ),
                    ],
                  ),
                ),
                const Divider(),
                Container(
                  padding: const EdgeInsets.all(10),
                  width: double.infinity,
                  child: Text(content),
                )
              ],
            ),
          ),
        ));
  }
}