flutter 自定义dialog、AlertDialog、SimpleDialog、showModalBottomSheet 使用

1.AlertDialog和SimpleDialog和自定义的弹窗都 需要使用showDialog包括起来/三方弹窗 toast 跟小程序的 showToast 效果一样；

import 'package:flutter/material.dart';
// 引入三方
import 'package:fluttertoast/fluttertoast.dart';
// 引入自定义弹窗
import '../../widgets/my_dialog.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({Key? key}) : super(key: key);
  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  _alertDialogMethod() async {
    var resulut = await showDialog(
        barrierDismissible: true, // 点击灰色背景是否会触发关闭当前弹窗
        context: context,
        builder: (context) {
          return AlertDialog(
            content: const Text('是否确认删除?'),
            actions: [
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context, '确认1111');
                },
                child: const Text('确认'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context, '取消2222');
                },
                child: const Text('取消'),
              ),
            ],
          );
        });
    print(resulut);
  }

  _simpleDialogMethod() {
    showDialog(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: const Text('simpleDialog页面展示!'),
          children: [
            SimpleDialogOption(
              child: const Text('免打扰'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            const Divider(),
            SimpleDialogOption(
              child: const Text('置顶群聊'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            const Divider(),
            SimpleDialogOption(
              child: const Text('删除消息'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  _showBottomSheetMethod() async {
    var sheets = await showModalBottomSheet(
      context: context,
      builder: (context) {
        return SizedBox(
          height: 300,
          child: Column(
            children: [
              const Padding(
                padding: EdgeInsets.all(10),
                child: Text(
                  '是否删除该操作',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
              ),
              ListTile(
                title: const Text('分享'),
                onTap: () {
                  Navigator.pop(context, '0'); // 关闭弹窗并返回参数
                },
              ),
              const Divider(),
              ListTile(
                title: const Text('删除'),
                onTap: () {
                  Navigator.pop(context, '1'); // 关闭弹窗并返回参数
                },
              ),
              const Divider(),
              ListTile(
                title: const Text('底部'),
                onTap: () {
                  Navigator.pop(context, '2'); // 关闭弹窗并返回参数
                },
              ),
            ],
          ),
        );
      },
    );
    print(sheets);
  }//  3. 三方弹窗 toast 跟小程序的 showToast 效果一样；
// 三方弹窗
  _showToastMethod() {
    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_LONG,// android 平台 弹窗时间长 短
        gravity: ToastGravity.CENTER,  // 弹窗居中展示还是上面还是下边
        timeInSecForIosWeb: 1,	// ios及 web显示弹窗时间
        backgroundColor: Colors.black, // 背景色
        textColor: Colors.white, // 文本颜色
        fontSize: 16.0); // 字体大小
  }
 // 使用自定义 dialog
  _selfDialog() {
    showDialog(
      context: context,// 固定写法
      builder: (context) {// 固定写法
        return const MyDialog();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
        // alert 弹窗
          ElevatedButton(
            onPressed: _alertDialogMethod,
            child: const Text('showalertDialog'),
          ),
          // simple 弹窗
          ElevatedButton(
            onPressed: _simpleDialogMethod,
            child: const Text('showsimpleDialog'),
          ),
          // 底部 sheet弹窗
          ElevatedButton(
            onPressed: _showBottomSheetMethod,
            child: const Text('showBottomSheet'),
          ),
          // 引用三方的弹窗
          ElevatedButton(
            onPressed: _showToastMethod,
            child: const Text('showToast'),
          ),
          // 自定义
          ElevatedButton(
            onPressed: _selfDialog,
            child: const Text('自定义dialog'),
          ),
        ],
      ),
    );
  }
}

2.自定义 dialog

import 'package:flutter/material.dart';
// 创建一个类继承 Dialog
class MyDialog extends Dialog {
  const MyDialog({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency, // 透明度
      child: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.green,
          child: const Text('data'),
        ),
      ),
    );
  }
}

3.三方插件Toast 效果与微信小程的 showToast 效果一样

1.打开pub.dev
2.搜索

3.查看使用方法

点击 readme 查看使用方法