Flutter对话框

  • AlertDialog(确认对话框)
  • SimpleDialog(选择对话框)
  • showModalBottomSheet(底部弹出的对话框)
  • showToast(提示信息框)
  • 自定义对话框
  • 定时器

AlertDialog(确认对话框)

flutter iOS禁止截图_#android

在actions中定义了两个按钮,分别为确定和取消, Navigator.pop(context, ‘Cancle’);是点击按钮后对话框退出,后面的参数为我们需要返回的值,用到了异步来获取返回的值

_alertDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("提示信息"),
            content: Text("确定删除吗?"),
            actions: [
              TextButton(
                child: Text("取消"),
                onPressed: () {
                  print("取消");
                  Navigator.pop(context, 'Cancle');
                },
              ),
              TextButton(
                  child: Text("确定"),
                  onPressed: () {
                    print("确定");
                    Navigator.pop(context, "Ok");
                  })
            ],
          );
        });

    print(result);
  }

flutter iOS禁止截图_#dart_02

SimpleDialog(选择对话框)

flutter iOS禁止截图_#dart_03

_simpleDialog() async {
    var redult = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("选择内容"),
            children: [
              SimpleDialogOption(
                child: Text("Option A"),
                onPressed: () {
                  print("Option A");
                  Navigator.pop(context, "A");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("Option B"),
                onPressed: () {
                  print("Option B");
                  Navigator.pop(context, "B");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("Option C"),
                onPressed: () {
                  print("Option C");
                  Navigator.pop(context, "C");
                },
              )
            ],
          );
        });
    print(redult);
  }

flutter iOS禁止截图_#dart_04

showModalBottomSheet(底部弹出的对话框)

flutter iOS禁止截图_#flutter_05

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

flutter iOS禁止截图_Text_06

showToast(提示信息框)

flutter iOS禁止截图_#flutter_07

showToast我们选择的是第三方库进行实现

  1. 首先在https://pub.dev/中搜索toast,我们选择的是fluttertoast(比较新)
  2. flutter iOS禁止截图_#flutter_08


  3. flutter iOS禁止截图_#dart_09

  4. 然后还是pubspec.yaml 中添加依赖
dependencies:
  fluttertoast: ^8.0.8

使用时在对应文件导包

import 'package:fluttertoast/fluttertoast.dart';
  1. 使用,可以将官方示例拿过来进行修改
_toast(){
    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_SHORT,
        //提示信息的方位
        gravity: ToastGravity.BOTTOM,
        //这个属性只有在iOS上才有用
        timeInSecForIosWeb: 1,
        //背景颜色
        backgroundColor: Colors.black,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

flutter iOS禁止截图_#flutter_10

上面几种对话框的完整代码

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class DialogPage extends StatefulWidget {
  DialogPage({Key? key}) : super(key: key);

  @override
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {
  _alertDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("提示信息"),
            content: Text("确定删除吗?"),
            actions: [
              TextButton(
                child: Text("取消"),
                onPressed: () {
                  print("取消");
                  Navigator.pop(context, 'Cancle');
                },
              ),
              TextButton(
                  child: Text("确定"),
                  onPressed: () {
                    print("确定");
                    Navigator.pop(context, "Ok");
                  })
            ],
          );
        });
    print(result);
  }

  _simpleDialog() async {
    var redult = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("选择内容"),
            children: [
              SimpleDialogOption(
                child: Text("Option A"),
                onPressed: () {
                  print("Option A");
                  Navigator.pop(context, "A");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("Option B"),
                onPressed: () {
                  print("Option B");
                  Navigator.pop(context, "B");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("Option C"),
                onPressed: () {
                  print("Option C");
                  Navigator.pop(context, "C");
                },
              )
            ],
          );
        });
    print(redult);
  }

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

  _toast(){
    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_SHORT,
        //提示信息的方位
        gravity: ToastGravity.BOTTOM,
        //这个属性只有在iOS上才有用
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.black,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dialog"),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _alertDialog,
            child: Text("alert弹出框-AlertDialog"),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _simpleDialog,
            child: Text("select弹出框-SimpleDialog"),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _modelBottomSheet,
            child: Text("ActionSheet底部弹出框-showModalBottomSheet"),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _toast,
            child: Text("toast-fluttertoast第三方库"),
          ),
          SizedBox(height: 20),
        ],
      )),
    );
  }
}

自定义对话框

flutter iOS禁止截图_flutter iOS禁止截图_11

新建一个类继承 Dialog

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

class MyDialog extends Dialog {
  String title;
  String content;
  MyDialog({this.title = "", this.content = ""});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      type: MaterialType.transparency,
      child: Center(
          child: Container(
        height: 300,
        width: 300,
        color: Colors.white,
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(10),
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.center,
                    child: Text("$title"),
                  ),
                  //这里是我们右上角×的返回
                  Align(
                    alignment: Alignment.centerRight,
                    child: InkWell(
                      child: Icon(Icons.close),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                  )
                ],
              ),
            ),
            Divider(),
            Container(
              padding: EdgeInsets.all(10),
              width: double.infinity,
              child: Text(
                "$content",
                textAlign: TextAlign.left,
              ),
            )
          ],
        ),
      )),
    );
  }
}

在按钮页面导入,在showDialog中返回我们自定义的对话框

ElevatedButton(
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (context) {
                    return MyDialog(
                      title: "关于我们",
                      content: "关于我们1111",
                    );
                  });
            },
            child: Text("toast-fluttertoast第三方库"),
          ),

flutter iOS禁止截图_flutter iOS禁止截图_12

定时器

使用时要导入

import 'dart:async';

定时器使用的方法

_showTimer(context) {
    var timer;
    timer = Timer.periodic(
      Duration(milliseconds: 5000), (t) {
      print("执行");
      Navigator.pop(context);
      t.cancel(); //取消定时器
    });
  }

然后再build中调用,达到定时器设置的时间对话框就会消失

@override
  Widget build(BuildContext context) {
    _showTimer(context);
  }