Flutter对话框(AlertDialog,SimpleDialog,showModalBottomSheet,showToast)以及定时器

Flutter对话框

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

AlertDialog(确认对话框)

在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);}

SimpleDialog(选择对话框)

_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);}

showModalBottomSheet(底部弹出的对话框)

  _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);}

showToast(提示信息框)

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

首先在https://pub.dev/中搜索toast，我们选择的是fluttertoast（比较新）
然后还是pubspec.yaml 中添加依赖

dependencies:fluttertoast: ^8.0.8

使用时在对应文件导包

import 'package:fluttertoast/fluttertoast.dart';

使用，可以将官方示例拿过来进行修改

  _toast(){Fluttertoast.showToast(msg: "提示信息",toastLength: Toast.LENGTH_SHORT,//提示信息的方位gravity: ToastGravity.BOTTOM,//这个属性只有在iOS上才有用timeInSecForIosWeb: 1,//背景颜色backgroundColor: Colors.black,textColor: Colors.white,fontSize: 16.0);}

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

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);}@overrideWidget 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),],)),);}
}

自定义对话框

新建一个类继承 Dialog

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructorsimport 'package:flutter/material.dart';class MyDialog extends Dialog {String title;String content;MyDialog({this.title = "", this.content = ""});@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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第三方库"),),

定时器

使用时要导入

import 'dart:async';

定时器使用的方法

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

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

 @overrideWidget build(BuildContext context) {_showTimer(context);}

Flutter对话框(AlertDialog,SimpleDialog,showModalBottomSheet,showToast)以及定时器相关推荐

Flutter开发之SimpleDialog对话框组件-1（40）
简单对话框组件在移动开发的交互中比较常用到,用于提示信息.警告.选择等功能.今天就学习一下简单的对话框组件SimpleDialog. 效果如图: 代码非常简单: import 'package:flu ...
【Android】对话框 AlertDialog
[Android]对话框 AlertDialog 本讲介绍一下Android基本组件:对话框AlertDialog. 来源:http://blog.csdn.net/feng88724/article ...
Flutter对话框
AlertDialog const AlertDialog({Key key,this.title, //标题this.titlePadding, // 标题内边距this.titleTextStyl ...
Android 中文 API ——对话框 AlertDialog.Builder
2019独角兽企业重金招聘Python工程师标准>>> 刚开始接触android的时候,我在做一个自定义对话框的时候,也是通过继承的方式来实现,后来随着对文档了解的深入,发现了and ...
Android详细的对话框AlertDialog.Builder使用方法
我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的朋友都会知道,大部分的平台都只提供了几个最简单的实现,如果我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承等 ...
024 Android 自定义样式对话框(AlertDialog)
1.AlertDialog介绍 AlertDialog并不需要到布局文件中创建,而是在代码中通过构造器(AlertDialog.Builder)来构造标题.图标和按钮等内容的. 常规使用步骤(具体参见 ...
Android.对话框(AlertDialog/Toast/Snackbar)
1.资料: 1.1.Android提醒微技巧,你真的了解Dialog.Toast和Snackbar吗? - CSDN博客.html(https://blog.csdn.net/guolin_blog/ ...
Flutter 底部弹框 showModalBottomSheet 使用Demo
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过文章底部扫码关注 [x2] ...
对话框AlertDialog的基本使用（新手）
AlertDialog是点击某一组件时,本文用按钮举例,弹出一个对话框,供你选择接下来的操作. 基础用法首先要给按钮设置点击事件,然后再onClick里构建 AlertDialog.Builder ...