AlertDialog dialog弹框
在
showDialog
中 定义AlertDialog
_alertDialog () async {
var result = showDialog<void>(
context: context,
barrierDismissible: true,
// false = user must tap button, true = tap outside dialog
builder: (BuildContext dialogContext) {
return AlertDialog(//定义AlertDialog
title: Text('标题'),
content: Text('dialog内容'),
actions: <Widget>[
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(dialogContext).pop(); // 就像前面的抽屉一样来关闭弹框
},
),FlatButton(
child: Text('确认'),
onPressed: () {
Navigator.of(dialogContext).pop(); // Dismiss alert dialog
},
),
],
);
},
);
}
SimpleDialog 下拉选框
_simpleDialog() async{
showDialog<void>(
context: context,
barrierDismissible: true,
// false = user must tap button, true = tap outside dialog
builder: (BuildContext dialogContext) {
return SimpleDialog(//定义SimpleDialog
title:Text("选择内容"),
children: <Widget>[
SimpleDialogOption(//选框子元素
child: Text("option A"),
onPressed: (){
Navigator.of(dialogContext).pop();
print("option A");
},
),
Divider(),//分割线
SimpleDialogOption(
child: Text("option b"),
onPressed: (){
Navigator.of(dialogContext).pop();
print("option b");
},
),
Divider(),//分割线
SimpleDialogOption(
child: Text("option c"),
onPressed: (){
Navigator.of(dialogContext).pop();
print("option c");
},
),
],
);
},
);
}
showModalBottomSheet
_showModalBottomSheet() async{
showModalBottomSheet(
context: context,
builder:(context) {
return Container(
height: 200,
child: Column(
children: <Widget>[
ListTile(
title: Text("分享 A"),
onTap: (){
print("分享 A");
Navigator.of(context).pop();
},
),
Divider(),
ListTile(
title: Text("分享 b"),
onTap: (){
print("分享 b");
Navigator.of(context).pop();
},
),
Divider(),
ListTile(
title: Text("分享 c"),
onTap: (){
print("分享 c");
Navigator.of(context).pop();
},
),
],
),
);
}
);
}
fluttertoast 第三方库
import 'package:fluttertoast/fluttertoast.dart';
_showToast() {
Fluttertoast.showToast(
msg: "吐司内容",
toastLength: Toast.LENGTH_LONG,
gravity: ToastGravity.BOTTOM,//显示位置
timeInSecForIosWeb: 1,//显示时长苹果
backgroundColor: Colors.black,//背景颜色
textColor: Colors.white,//文字颜色
fontSize: 16.0//文字大小
);
}
Column(
children: <Widget>[
RaisedButton(
child: Text("alert弹出框-AlertDialog"),
onPressed: _alertDialog,
),
RaisedButton(
child: Text("弹出框-SimpleDialog"),
onPressed: _simpleDialog,
),
RaisedButton(
child: Text("底部弹出框-showModalBottomSheet"),
onPressed: _showModalBottomSheet,
),
RaisedButton(
child: Text("吐司-showToast"),
onPressed: _showToast,
),
RaisedButton(
child: Text("自定义Dialog"),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return MyDialog();//必须先引入你的组件
});
},
),
]
)
自定义Dialog
创建 MyDialog组件
import 'package:flutter/material.dart';
/*
* Dialog Template
* 自定义dialog
*/
class MyDialog extends Dialog {
@override
Widget build(BuildContext context) {
return Material(//定义全局大小的元素
type: MaterialType.transparency, //设置整个元素是透明的
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,//居中显示
children: <Widget>[
Padding(//边距组件
padding: EdgeInsets.all(10),//设置内边距
child: Container(//这里就可以实现一些自定义功能
height: 200,
width: 200,
color: Colors.white,
child: RaisedButton(child: Text("关闭自定义Dialog"),onPressed: (){
Navigator.of(context).pop();
},),
),
),
],
)),
);
}
}