常见的有 AlertDialog 、SimpleDialog、 showModalBottomSheet、showToast 四种类型的 Dialog。还可以自定义 Dialog。
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
_alertDialog() async {
var result = await showDialog(
barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示信息!"),
content: Text("您确定要删除吗?"),
actions: <Widget>[
FlatButton(
child: Text("取消"),
onPressed: () {
print("取消");
Navigator.pop(context, 'Cancle');
},
),
FlatButton(
child: Text("确定"),
onPressed: () {
print("确定");
Navigator.pop(context, "Ok");
},
)
],
);
});
print(result);
}
_simpleDialog() async {
var result = await showDialog(
barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return SimpleDialog(
title: Text("选择内容"),
children: <Widget>[
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");
},
),
Divider(),
],
);
});
print(result);
}
_modelBottomSheet() async {
var result = await showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 220,
child: Column(
children: <Widget>[
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,
timeInSecForIosWeb: 1,
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('alert弹出框-AlertDialog '),
onPressed: _alertDialog,
),
SizedBox(height: 20),
RaisedButton(
child: Text('select弹出框-SimpleDialog'),
onPressed: _simpleDialog,
),
SizedBox(height: 20),
RaisedButton(
child: Text('ActionSheet底部弹出框-showModalBottomSheet'),
onPressed: _modelBottomSheet,
),
SizedBox(height: 20),
RaisedButton(
child: Text('toast-fluttertoast第三方库'),
onPressed: _toast,
),
// fluttertoast
],
),
),
);
}
}
AlertDialog
SimpleDialog
showModalBottomSheet
showToast
- 自定义 Dialog
自定义 Dialog 对象，需要继承 Dialog 类，尽管 Dialog 提供了 child 参数可以用来写视图界面， 但是往往会达不到我们想要的效果，因为默认的 Dialog 背景框是满屏的。如果我们想完全定义界面，就需要重写 build 函数。
封装组件
/*
* Author: lin.zehong
* Date: 2020-07-04 12:27:54
* Desc: 自定义 Dialog
*/
import 'package:flutter/material.dart';
class DialogPage extends Dialog {
final String title;
final String content;
DialogPage({this.title = "标题", this.content = "内容"});
@override
Widget build(BuildContext context) {
return new Material( // 返回 Material 组件，指定 type 背景颜色为透明
type: MaterialType.transparency,
child: Center(
child: Container(
height: 300,
width: 300,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Text(
'${this.title}',
style: TextStyle(fontSize: 16),
),
),
Align(
alignment: Alignment.topRight,
child: InkWell(
child: Icon(Icons.close),
onTap: () {
Navigator.pop(context);
print('xxx');
},
),
),
],
),
Divider(),
Container(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Text(
'${this.content}',
style: TextStyle(
fontSize: 14,
color: Colors.black54,
),
),
],
),
),
],
),
),
));
}
}
使用：还是得通过 showDialog 来调用展示自定义的 Dialog
import 'package:flutter/material.dart';
import 'package:app03/components/Dialog/Dialog.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
_showDialog() {
showDialog(
context: context,
builder: (context) {
return DialogPage(
title: '这是传入的标题',
content: '内容先休息休息',
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('alert弹出框-AlertDialog '),
onPressed: this._showDialog,
),
SizedBox(height: 20),
// fluttertoast
],
),
),
);
}
}
效果
第三方库
- easy_dialog 源码很简单
