AlertDialog

import 'package:flutter/material.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({super.key});

  @override
  State<MessagePage> createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {

  void _alertDialog() {
    showDialog(
      context: context, 
      builder: (context){
        return AlertDialog(
          title: const Text('提示信息'),
          content: const Text('您确定要删除吗？'),
          actions: [
            TextButton(
              onPressed: (){
                print('取消');
                Navigator.pop(context);
              }, 
              child: const Text('取消')
            ),
            TextButton(
              onPressed: (){
                print('确定');
                Navigator.pop(context);
              }, 
              child: const Text('确定')
            ),
          ],
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _alertDialog, 
            child: const Text('alert弹出框-AlertDialog')
          ),
          ElevatedButton(
            onPressed: (){}, 
            child: const Text('simple弹出框-SimpleDialog')
          ),
          ElevatedButton(
            onPressed: (){}, 
            child: const Text('model弹出框-ModalBottomSheet')
          ),
        ],
      ),
    );
  }
}

SimpleDialog、SimpleDialogOption

import 'package:flutter/material.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({super.key});

  @override
  State<MessagePage> createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {

  void _alertDialog() {
    showDialog(
      context: context, 
      builder: (context){
        return AlertDialog(
          title: const Text('提示信息'),
          content: const Text('您确定要删除吗？'),
          actions: [
            TextButton(
              onPressed: (){
                print('取消');
                Navigator.pop(context);
              }, 
              child: const Text('取消')
            ),
            TextButton(
              onPressed: (){
                print('确定');
                Navigator.pop(context);
              }, 
              child: const Text('确定')
            ),
          ],
        );
      }
    );
  }

  void _simpleDialog() async  {
    var result = await showDialog(
      // barrierDismissible:false,
      context: context, 
      builder: (context){
        return SimpleDialog(
          title: const Text('选择内容'),
          children: [
            SimpleDialogOption(
              child: const Text('option A'),
              onPressed: (){
                print('option A');
                Navigator.pop(context, 'A');
              },
            ),
            SimpleDialogOption(
              child: const Text('option B'),
              onPressed: (){
                print('option B');
                Navigator.pop(context, 'B');
              },
            ),
            SimpleDialogOption(
              child: const Text('option C'),
              onPressed: (){
                print('option C');
                Navigator.pop(context, 'C');
              },
            ),
          ],
        );
      }
    );
    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _alertDialog, 
            child: const Text('alert弹出框-AlertDialog')
          ),
          ElevatedButton(
            onPressed: _simpleDialog, 
            child: const Text('simple弹出框-SimpleDialog')
          ),
        ],
      ),
    );
  }
}

showModalBottomSheet

import 'package:flutter/material.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({super.key});

  @override
  State<MessagePage> createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {

  void _alertDialog() {
    showDialog(
      context: context, 
      builder: (context){
        return AlertDialog(
          title: const Text('提示信息'),
          content: const Text('您确定要删除吗？'),
          actions: [
            TextButton(
              onPressed: (){
                print('取消');
                Navigator.pop(context);
              }, 
              child: const Text('取消')
            ),
            TextButton(
              onPressed: (){
                print('确定');
                Navigator.pop(context);
              }, 
              child: const Text('确定')
            ),
          ],
        );
      }
    );
  }

  void _simpleDialog() async  {
    var result = await showDialog(
      // barrierDismissible:false,
      context: context, 
      builder: (context){
        return SimpleDialog(
          title: const Text('选择内容'),
          children: [
            SimpleDialogOption(
              child: const Text('option A'),
              onPressed: (){
                print('option A');
                Navigator.pop(context, 'A');
              },
            ),
            SimpleDialogOption(
              child: const Text('option B'),
              onPressed: (){
                print('option B');
                Navigator.pop(context, 'B');
              },
            ),
            SimpleDialogOption(
              child: const Text('option C'),
              onPressed: (){
                print('option C');
                Navigator.pop(context, 'C');
              },
            ),
          ],
        );
      }
    );
    print(result);
  }

  void _modelBottomSheet() {
    showModalBottomSheet(
      context: context, 
      builder: (context){
        // 如果需要改变高度可以用SizedBox包裹
        return ListView(
          children: [
            ListTile(
              leading: const Icon(Icons.ac_unit, color: Colors.red,),
              title: const Text('分享 A'),
              onTap: (){
                print('分享 A');
                Navigator.pop(context);
              },
            ),
            Divider(),
            ListTile(
              leading: const Icon(Icons.access_alarm, color: Colors.red,),
              title: const Text('收藏 B'),
              onTap: (){
                print('收藏 B');
                Navigator.pop(context);
              },
            ),
            Divider(),
            ListTile(
              leading: const Icon(Icons.access_time, color: Colors.red,),
              title: const Text('取消 C'),
              onTap: (){
                print('取消 C');
                Navigator.pop(context);
              },
            ),
          ],
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _alertDialog, 
            child: const Text('alert弹出框-AlertDialog')
          ),
          ElevatedButton(
            onPressed: _simpleDialog, 
            child: const Text('simple弹出框-SimpleDialog')
          ),
          ElevatedButton(
            onPressed: _modelBottomSheet, 
            child: const Text('model弹出框-ModalBottomSheet')
          ),
        ],
      ),
    );
  }
}

Flutter Toast

fluttertoast的使用

https://pub.dev/packages/fluttertoast

// add this line to your dependencies
fluttertoast: ^8.0.9

import 'package:fluttertoast/fluttertoast.dart';

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({super.key});

  @override
  State<MessagePage> createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {

  void _alertDialog() {
    showDialog(
      context: context, 
      builder: (context){
        return AlertDialog(
          title: const Text('提示信息'),
          content: const Text('您确定要删除吗？'),
          actions: [
            TextButton(
              onPressed: (){
                print('取消');
                Navigator.pop(context);
              }, 
              child: const Text('取消')
            ),
            TextButton(
              onPressed: (){
                print('确定');
                Navigator.pop(context);
              }, 
              child: const Text('确定')
            ),
          ],
        );
      }
    );
  }

  void _simpleDialog() async  {
    var result = await showDialog(
      // barrierDismissible:false,
      context: context, 
      builder: (context){
        return SimpleDialog(
          title: const Text('选择内容'),
          children: [
            SimpleDialogOption(
              child: const Text('option A'),
              onPressed: (){
                print('option A');
                Navigator.pop(context, 'A');
              },
            ),
            SimpleDialogOption(
              child: const Text('option B'),
              onPressed: (){
                print('option B');
                Navigator.pop(context, 'B');
              },
            ),
            SimpleDialogOption(
              child: const Text('option C'),
              onPressed: (){
                print('option C');
                Navigator.pop(context, 'C');
              },
            ),
          ],
        );
      }
    );
    print(result);
  }

  void _modelBottomSheet() {
    showModalBottomSheet(
      context: context, 
      builder: (context){
        return SizedBox(
          height: 200,
          child: ListView(
          children: [
            ListTile(
              leading: const Icon(Icons.ac_unit, color: Colors.red,),
              title: const Text('分享 A'),
              onTap: (){
                print('分享 A');
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.access_alarm, color: Colors.red,),
              title: const Text('收藏 B'),
              onTap: (){
                print('收藏 B');
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.access_time, color: Colors.red,),
              title: const Text('取消 C'),
              onTap: (){
                print('取消 C');
                Navigator.pop(context);
              },
            ),
          ],
        ),
        );
      }
    );
  }

  void _toast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _alertDialog, 
            child: const Text('alert弹出框-AlertDialog')
          ),
          ElevatedButton(
            onPressed: _simpleDialog, 
            child: const Text('simple弹出框-SimpleDialog')
          ),
          ElevatedButton(
            onPressed: _modelBottomSheet, 
            child: const Text('model弹出框-ModalBottomSheet')
          ),
          ElevatedButton(
            onPressed: _toast, 
            child: const Text('toast弹出框-Toast')
          ),
        ],
      ),
    );
  }
}

自定义Dialog

1.创建一个自定义的Dialog.dart文件

import 'package:flutter/material.dart';

class MyDialog extends Dialog{
  final String title;
  final String content;
  final Function()? confirm;
  // final Widget? child;
  const MyDialog({Key? key, required this.title, required this.content, required this.confirm}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return Material(
      type: MaterialType.transparency, // 透明类型
      child: Center(
        child: SizedBox(
          width: 300,
          height: 300,
          child: Container(
            color: Colors.white,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(10),
                  child: Stack(
                    children: [
                      Align(
                        alignment: Alignment.center,
                        child: Text(title, style: const TextStyle(fontSize: 20)),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: InkWell(
                          onTap: confirm,
                          child: const Icon(Icons.close),
                        ),
                      ),
                    ],
                  ),
                ),
                const Divider(),
                Padding(
                  padding: const EdgeInsets.all(10),
                  child: Text(content, style: const TextStyle(fontSize: 16)),
                ),
                const Divider(),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    TextButton(
                      onPressed: (){
                        Navigator.pop(context);
                      }, 
                      child: const Text('取消')
                    ),
                    TextButton(
                      onPressed: (){
                        Navigator.pop(context);
                      }, 
                      child: const Text('确定')
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

2.在需要使用的页面引入

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

import 'dialog.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({super.key});

  @override
  State<MessagePage> createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {

  void _alertDialog() {
    showDialog(
      context: context, 
      builder: (context){
        return AlertDialog(
          title: const Text('提示信息'),
          content: const Text('您确定要删除吗？'),
          actions: [
            TextButton(
              onPressed: (){
                print('取消');
                Navigator.pop(context);
              }, 
              child: const Text('取消')
            ),
            TextButton(
              onPressed: (){
                print('确定');
                Navigator.pop(context);
              }, 
              child: const Text('确定')
            ),
          ],
        );
      }
    );
  }

  void _simpleDialog() async  {
    var result = await showDialog(
      // barrierDismissible:false,
      context: context, 
      builder: (context){
        return SimpleDialog(
          title: const Text('选择内容'),
          children: [
            SimpleDialogOption(
              child: const Text('option A'),
              onPressed: (){
                print('option A');
                Navigator.pop(context, 'A');
              },
            ),
            SimpleDialogOption(
              child: const Text('option B'),
              onPressed: (){
                print('option B');
                Navigator.pop(context, 'B');
              },
            ),
            SimpleDialogOption(
              child: const Text('option C'),
              onPressed: (){
                print('option C');
                Navigator.pop(context, 'C');
              },
            ),
          ],
        );
      }
    );
    print(result);
  }

  void _modelBottomSheet() {
    showModalBottomSheet(
      context: context, 
      builder: (context){
        return SizedBox(
          height: 200,
          child: ListView(
          children: [
            ListTile(
              leading: const Icon(Icons.ac_unit, color: Colors.red,),
              title: const Text('分享 A'),
              onTap: (){
                print('分享 A');
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.access_alarm, color: Colors.red,),
              title: const Text('收藏 B'),
              onTap: (){
                print('收藏 B');
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.access_time, color: Colors.red,),
              title: const Text('取消 C'),
              onTap: (){
                print('取消 C');
                Navigator.pop(context);
              },
            ),
          ],
        ),
        );
      }
    );
  }

  void _toast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast", // 提示信息
        toastLength: Toast.LENGTH_SHORT, // 针对安卓的提示时间
        gravity: ToastGravity.CENTER, // 方位
        timeInSecForIosWeb: 1,  // 提示时间 针对ios 和 web
        backgroundColor: Colors.red, // 背景颜色
        textColor: Colors.white, // 文本颜色
        fontSize: 16.0 // 文字字体大小
    );

  }

  // 自定义弹出框
  void _customDialog() {
    showDialog(
      context: context, 
      builder: (context){
        return  MyDialog(
          title: '关于我们',
          content: '我是内容',
          confirm: (){
            print('取消');
            Navigator.of(context).pop();
          },
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _alertDialog, 
            child: const Text('alert弹出框-AlertDialog')
          ),
          ElevatedButton(
            onPressed: _simpleDialog, 
            child: const Text('simple弹出框-SimpleDialog')
          ),
          ElevatedButton(
            onPressed: _modelBottomSheet, 
            child: const Text('model弹出框-ModalBottomSheet')
          ),
          ElevatedButton(
            onPressed: _toast, 
            child: const Text('toast弹出框-Toast')
          ),
          ElevatedButton(
            onPressed: _customDialog, 
            child: const Text('自定义弹出框')
          ),
        ],
      ),
    );
  }
}