前言：

各位同学大家好，相信移动端（安卓， iOS )和前端的同学都有使用过dialog对话框 ,移动端（安卓 iOS ）和前端对于diaog 的实现都有很好用的对应的原生api支持, 网上也有很多开源博客我这边就不展开详细讲了，今天给大家分享一下flutter中dialog对话框的各种用法。

准备工作：

安装flutter环境如果只是跑安卓设备 win系统就行了要是同时运行安卓和iOS 就需要mac电脑了配置环境变量这边就不展开讲了大家可以看我之前的文章

需要用到的三方库

fluttertoast: ^3.1.3 toast 库

效果图

alertDialog:

QQ截图20200531131836.png

simpleDialog:

QQ截图20200531131903.png

QQ截图20200531131851.png

QQ截图20200531131911.png

modeBottomDialog:

QQ截图20200531131929.png

toastDialog:

QQ截图20200531131945.png

自定义LoadingDialog （网络加载） :

QQ截图20200531132014.png

具体代码实现：

alertDialog:

alertDialog警报对话框会通知用户需要确认的情况。警报对话框具有可选标题和可选的操作列表。标题显示在内容上方，操作显示在内容下方。通常我们在点击一些需要用户确认操作的功能（例如删除，等）的时候就会用到这个alertDialog 警报对话框。

如图：

QQ截图20200531131836.png

alertDialog的代码实现：

  Future  _alertDialog()async{
    var  result  =await showDialog(
        context: context,
        builder: (context){
          return  AlertDialog(
            title: Text("提示信息"),
            content: Text("您确定要删除吗"),
            actions: <Widget>[
              RaisedButton(
                child: Text("取消"),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print("取消");
                  Toast.show("你取消了", context);
                  Navigator.pop(context);
                },
              ),
              RaisedButton(
                child: Text("确定"),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print("确定");
                  Toast.show("你确定了", context);
                  Navigator.pop(context,"ok");
                },
              ),
            ],
          );
        }
    );
    print("result   -- >  "+result);
  return  result;
  }

这边我们定义了_alertDialog 方法然后在里面调用了showDialog()组件返回一个 AlertDialog（）组件
AlertDialog()组件中我们设置 title 和content , 然后 actions 属性中插入两个RaisedButton 来处理对话框里点击的操作，通过调用Navigator.pop(context); 来处理对话框架点击销毁以及点击拿的结果最我们将选择项点击的操的结果赋值给 var result 变量并返回。

具体 _alertDialog ()方法的调用

  Widget build(BuildContext context) {
    // TODO: implement build
    return  Scaffold(
      appBar: AppBar(
        title: Text("alertDialog弹出演示"),
      ),
      body: Container(
        child: RaisedButton(
          child: Text(
              "点击显示alertDialog"
          ),
          onPressed: (){
            _alertDialog().then((value){
              print(value);
            });
          },
        ),
      ),
    );
  }

simpleDialog:

简单的对话框为用户提供了多个选项之间的选择。一个简单的对话框有一个可选的标题，显示在选项上方。下面则是具体的选择项 ,通常我们在项目中用这个simpleDialog 来实现一些列表选择则的功能的实现。

如图：

QQ截图20200531131903.png

QQ截图20200531131851.png

QQ截图20200531131911.png

simpleDialog的代码实现：

 Future  simpleDialog()async{
    var  result=await showDialog(context: context,
        builder:(context){
          return SimpleDialog(
            title: Text("选择角色"),
            children: <Widget>[
              SimpleDialogOption(
                child: Text("旋涡名人"),
                onPressed: (){
                  print("旋涡名人");
                  Navigator.pop(context,"旋涡名人");
                },
              ),
              SimpleDialogOption(
                child: Text("宇智波佐助 "),
                onPressed: (){
                  print("宇智波佐助");
                  Navigator.pop(context,"宇智波佐助");
                },
              ),
              SimpleDialogOption(
                child: Text("千手柱间"),
                onPressed: (){
                  print("千手柱间");
                  Navigator.pop(context,"千手柱间");
                },
              ),
              SimpleDialogOption(
                child: Text("宇智波斑"),
                onPressed: (){
                  print("宇智波斑");
                  Navigator.pop(context,"宇智波斑");
                },
              ),
            ],
          );
        }
    );
    print("result --- > "+result);
    return result;
  }

这边我们定义了simpleDialog方法然后在里面调用了showDialog()组件返回一个 SimpleDialog（）组件
SimpleDialog()组件中我们设置 title , 然后通过 children属性中插入多个SimpleDialogOption来处理对话框里面的选择项的操作通过调用Navigator.pop(context); 来处理对话框架点击销毁以及点击拿的结果最我们将选择项点击的操的结果赋值给 var result 变量并返回

具体调用：

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    appBar: AppBar(
      title: Text("simpleDialog "),

    ),
    body: Container(
      color: Colors.white,
      child: Center(
        child: RaisedButton(
          child: Text(textStr),
          onPressed:(){
            simpleDialog().then((value){
              setState(() {
                if(!textStr.isEmpty){
                  textStr=value;
                }
              });
            });
          } ,
        ),
      ),
    ),
  );
}

通过调用 simpleDialog方法的 then属性拿到返回的结果然后赋值给我们点击的RaisedButton 的Text 里面的变量

  onPressed:(){
       simpleDialog().then((value){
          setState(() {
              if(!textStr.isEmpty){
                 textStr=value;
                  }
            });
         });
   }

modeBottomDialog:

modeBOttomDialog 通常我用来实现一键分享的功能的实现（如分享到微信微博 QQ等）

如图：

QQ截图20200531145448.png

具体代码实现：

  Future   _modeBottomDialog()async{
    var  result=await showModalBottomSheet(context: context,
        builder: (context){
          return Container(
            child: Column(
              children: <Widget>[
                ListTile(
                    title: Text("分享到 QQ"),
                    onTap: (){
                      Navigator.pop(context,"分享到 QQ");
                    }
                ),
                ListTile(
                    title: Text("分享到 微信 "),
                    onTap: (){
                      Navigator.pop(context,"分享到 微信");
                    }
                ),
                ListTile(
                    title: Text("分享到 微博"),
                    onTap: (){
                      Navigator.pop(context,"分享到 微博");
                    }
                ),
                ListTile(
                    title: Text("分享到 知乎"),
                    onTap: (){
                      Navigator.pop(context,"分享到 知乎");
                    }
                ),
              ],
            ),
          );
        }
    );
    print("分享 --- > "+result);
   return result;
  }

这边我们定义了_modeBottomDialog方法然后在里面调用了showModalBottomSheet()组件, 传入context 上下文返回一个 widget。（widget 你想要返回什么样看你自己发挥这我返回一个 Container 里面包裹一个 Column）然后我们再Column 的 children 里面插入多条ListTitle 来显示分享的点击条目，同simple 一样通过调用Navigator.pop(context,“分享到知乎”); 来处理对话框架点击销毁以及点击拿的结果最我们将选择项点击的操的结果赋值给 var result 变量并返回。

具体调用：

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("modeBOttomDialog"),
      ),
      body: Container(
        child: RaisedButton(
          child: Text("分享"
          ),
          onPressed: (){
            _modeBottomDialog().then((value){
              print("value    ---  > "+value  );
            });
          },
        ),
      ),
    );
  }

toastDialog:

toastDialog 是平时用来做提示的 toast 信息实现（例如，账号密码不能为空，账号或者密码不对）
toastDialog 这个需要用到三方库 fluttertoast: ^3.1.3 我们先要在 pubspec.yaml 中添加依赖
QQ截图20200531153402.png
然后执行在控制台执行flutter pub get 下载依赖
使用需要导入这个包

import 'package:fluttertoast/fluttertoast.dart';

toastDialog具体代码实现：

_toast()async{
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",  //弹出内容
        toastLength: Toast.LENGTH_SHORT, //弹出时间长短 
        gravity: ToastGravity.CENTER, //弹出位置  上 下  中   
        timeInSecForIos: 3,  //在什么平台上面使用  安卓  IOS  Web
        backgroundColor: Colors.black, // 背景颜色
        textColor: Colors.white, //字体颜色
        fontSize: 16.0 //字体大小 
    );

我们调用三方库里面的 showToast ()组件反别设置

        msg: "This is Center Short Toast",  //弹出内容
        toastLength: Toast.LENGTH_SHORT, //弹出时间长短 
        gravity: ToastGravity.CENTER, //弹出位置  上 下  中   
        timeInSecForIos: 3,  //在什么平台上面使用  安卓  IOS  Web
        backgroundColor: Colors.black, // 背景颜色
        textColor: Colors.white, //字体颜色
        fontSize: 16.0 //字体大小

各个属性来满足我们实际需求

具体调用：

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
         title: Text("_toastDialogState"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("点击弹出toast"),
              onPressed: _toast,
            ),
            RaisedButton(
              child: Text("调用封装的方法弹出"),
              onPressed:  ()async{
                ToastUtil.showInfo("显示toast");
              },
            )
          ],
        )
      ),
    );
  }

我们也可以对toast进行适当的封装

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

class   ToastUtil{
   static  void   showInfo(String  str)async {
     Fluttertoast.showToast(
         msg: str,
         toastLength: Toast.LENGTH_SHORT,
         gravity: ToastGravity.CENTER,
         timeInSecForIos: 3,
         backgroundColor: Colors.black,
         textColor: Colors.white,
         fontSize: 16.0
     );
   }
}

然后再其他类只需要导入我这个工具类就行了
直接调用：

    RaisedButton(
              child: Text("调用封装的方法弹出"),
              onPressed:  ()async{
                ToastUtil.showInfo("显示toast");
              },
     )

自定义 LoadingDialog（网络加载对话框)：

通常我们再加载网络请求后台的数据展示再我们的app上面的时候这个过程需要一定的时间
所以这个时候我们需要做一个loadingDialog 页面来处理这个等待的过程

如图：

QQ截图20200531132014.png

具体代码实现：

import 'package:flutter/material.dart';
class LoadingDialog extends Dialog {
  String text;
  LoadingDialog({Key key, @required this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return new Material(
      //创建透明层
      type: MaterialType.transparency, //透明类型
      child: new Center(
        //保证控件居中效果
        child: new SizedBox(
          width: 100.0,
          height: 100.0,
          child: new Container(
            decoration: ShapeDecoration(
              color: Color(0xffffffff),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(8.0),
                ),
              ),
            ),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new CircularProgressIndicator(),
                new Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                  ),
                  child: new Text(
                    text,
                    style: new TextStyle(fontSize: 12.0),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这里我们自己创建一个loadingDialog 需要继承flutter sdk 里面的Dialog 然后重写 build 方法需要返回一个widget
我们这里返回Material 来设置透明效果然后再里面嵌套 Center 来使得我们的要展示的内容居中显示
然后创建 Sizebox 盒子模型组件设置宽高各100的正方形来装载我们显示的的内容
我们通过 ShapeDecoration 组件来实现 loading 动画效果
在下面我们加一个text显示我们需要显示的提示的文字（加载中等待中等等）

具体调用 :

我们需要写一个 showCustomDialog 方法来转载我们的loadingDialog

  void showCustomDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return LoadingDialog(text: "加载中");
        });
  }

然后我们在具体的业务逻辑中的widget 或者网络请求中调用

import 'package:flutter/material.dart';
import '../dialog/loading_dialog.dart';

class LoagingWidget extends StatefulWidget {
  LoagingWidget({Key key}) : super(key: key);

  @override
  _LoagingWidgetState createState() {
    return _LoagingWidgetState();
  }
}

class _LoagingWidgetState extends State<LoagingWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Scaffold(
      appBar: AppBar(
        title: Text("网络加载loading"),

      ),
      body: Container(
        child: RaisedButton(
          child: Text("点击加载"),
          onPressed: (){
            setState(() {
              showCustomDialog(context);
            });
          },
        ),
      ),
    );
  }
  void showCustomDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return LoadingDialog(text: "加载中");
        });
  }
}

关闭对话框通过调用 Navigator.pop(context) 来关闭

Navigator.pop(context);

到此flutter 中dialog 的各种用法就介绍完了如果有错误或者遗漏的地方希望各位同学及时指正
项目地址：https://github.com/xq19930522/flutter_dialog_demo.git

最后总结：

flutter中的dialog提供的api比较丰富例如 alertDialog simpleDialog modeBottomDialog toastDialog
这些都可以实现很多功能的需求这些dialog我们都可以自己自定义dialog 继承flutter sdk里面的Dialog来实现的有兴趣的同学可以自己在私下研究这里就不过多讲了最后希望我的文章能帮助到各位解决问题有兴趣的朋友可以加我QQ/微信（1693891473）多多交流

QQ 交流群：

在这里插入图片描述

Flutter Dialog 对话框各种用法

前言：

准备工作：

需要用到的三方库

效果图

alertDialog:

simpleDialog:

modeBottomDialog:

toastDialog:

自定义LoadingDialog （网络加载） :

具体代码实现：

alertDialog:

如图：

alertDialog的代码实现：

具体 _alertDialog ()方法的调用

simpleDialog:

如图：

simpleDialog的代码实现：

具体调用：

modeBottomDialog:

如图：

具体代码实现：

具体调用：

toastDialog:

toastDialog具体代码实现：

具体调用：

自定义 LoadingDialog（网络加载对话框)：

如图：

具体代码实现：

具体调用 :

最后总结：

QQ 交流群：

猜你喜欢

Flutter Dialog 对话框各种用法

前言：

准备工作：

需要用到的三方库

效果图

alertDialog:

simpleDialog:

modeBottomDialog:

toastDialog:

自定义LoadingDialog （网络加载） :

具体代码实现：

alertDialog:

如图：

alertDialog的代码实现 ：

具体 _alertDialog ()方法的调用

simpleDialog:

如图：

simpleDialog的代码实现 ：

具体调用：

modeBottomDialog:

如图：

具体代码实现：

具体调用：

toastDialog:

toastDialog具体代码实现 ：

具体调用：

自定义 LoadingDialog（网络加载对话框)：

如图：

具体代码实现：

具体调用 :

最后总结 ：

QQ 交流群：

猜你喜欢

alertDialog的代码实现：

simpleDialog的代码实现：

toastDialog具体代码实现：

最后总结：