27、flutter Dialog 弹窗

AlertDialog

  //放在State<>之下

void _alertDialog() async {
    var result = await showDialog(
        barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text("提示信息!"),
            content: const Text("您确定要删除吗?"),
            actions: <Widget>[
              //按钮组
              TextButton(
                child: const Text("取消"),
                onPressed: () {
                  print("取消————————————————————");
                  Navigator.pop(context, 'Cancle'); //关闭页面并传值
                },
              ),
              TextButton(
                child: const Text("确定"),
                onPressed: () {
                  print("确定————————————————");
                  Navigator.pop(context, "Ok");
                },
              )
            ],
          );
        });
    print(result);
  }

 

SimpleDialog、SimpleDialogOption

  void _simpleDialog() async {
    var result = await showDialog(
        barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: const Text("请选择内容"),
            children: <Widget>[
              SimpleDialogOption(
                child: const Text("Option A"),
                onPressed: () {
                  print("Option A");
                  Navigator.pop(context, "A");
                },
              ),
              const Divider(),
              SimpleDialogOption(
                child: const Text("Option B"),
                onPressed: () {
                  print("Option B");
                  Navigator.pop(context, "B");
                },
              ),
              const Divider(),
              SimpleDialogOption(
                child: const Text("Option C"),
                onPressed: () {
                  print("Option C");
                  Navigator.pop(context, "C");
                },
              ),
            ],
          );
        });
    print(result);
  }

showModalBottomSheet

  void _modelBottomSheet() async {
    var result = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return SizedBox(
            height: 220,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: const Text("分享 A"),
                  onTap: () {
                    Navigator.pop(context, "分享 A");
                  },
                ),
                const Divider(),
                ListTile(
                  title: const Text("分享 B"),
                  onTap: () {
                    Navigator.pop(context, "分享 B");
                  },
                ),
                const Divider(),
                ListTile(
                  title: const Text("分享 C"),
                  onTap: () {
                    Navigator.pop(context, "分享 C");
                  },
                )
              ],
            ),
          );
        });
    print(result);
  }

使用

ElevatedButton(onPressed: _alertDialog, child: Text("AlertDialog")),

Flutter Toast（几秒后消失）提示信息

fluttertoast: ^8.0.9

import 'package:fluttertoast/fluttertoast.dart';

  void _toTost() async{
    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_SHORT,  //安卓里调时间   LENGTH_LONG 长时间  LENGTH_SHORT 短时间
        gravity: ToastGravity.CENTER, //位置
        timeInSecForIosWeb: 1, //提示时间 针对 ios与web
        backgroundColor: Color.fromARGB(255, 4, 151, 77), //背景颜色
        textColor: const Color.fromARGB(255, 187, 38, 38), //字体颜色
        fontSize: 16.0); //字体大小
  }

 自定义弹窗

新建myDialog.dart

import 'package:flutter/material.dart';

class MyDialog extends Dialog {
  String title; // 对话框标题
  String content; // 对话框内容，默认为空字符串
  Function()? onClosed; // 对话框关闭时的回调函数，可为空
  MyDialog({
    Key? key,
    required this.title,
    required this.onClosed,
    this.content = "",
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      
      type: MaterialType.transparency,//背景透明
      child: Center(
        child: Container(
          height: 300,
          width: 300,
          color: Colors.white, // 对话框的背景颜色
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10),
                child: Stack(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.center,
                      child: Text(title), // 对话框标题文本
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: InkWell(
                        onTap: onClosed, // 点击关闭图标时触发的回调函数
                        child: const Icon(Icons.close), // 关闭图标
                      ),
                    ),
                  ],
                ),
              ),
              const Divider(), // 分割线
              Container(
                padding: const EdgeInsets.all(10),
                width: double.infinity,
                child: Text(content, textAlign: TextAlign.left), // 对话框内容文本
              ),
            ],
          ),
        ),
      ),
    );
  }
}

调用Mydialog

  void _myDialog() async {
    await showDialog(
        barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
        context: context,
        builder: (context) {
          return MyDialog(
              title: '标题',
              onClosed: () {
                print("关闭");
                Navigator.of(context).pop();
              },
              content: "我是一个内容");
        });
  }