void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'FlutterDialog'),
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_dialog/CustomDialog.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> listData = List();
@override
void initState() {
super.initState();
listData.add('没有标题的的Dialog');
listData.add('有标题的的Dialog');
listData.add('没有取消按钮');
listData.add('自定义确定按钮文本');
listData.add('自定义按钮文本颜色');
listData.add('自定义确定按钮颜色');
listData.add('自定义取消按钮颜色');
listData.add('点击弹窗外部是否能关闭');
listData.add('点击确定按钮回调');
listData.add('弹窗关闭回调');
listData.add('带有图片的Dialog');
setState(() {
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
margin: EdgeInsets.only(top: 16.0),
child: ListView.separated(
itemCount: listData == null ? 0 : listData.length,
itemBuilder: (context, index) {
//如果到了表尾
return buildModule(context, index, listData[index]);
},
separatorBuilder: (context, index) => Divider(height: 1.0, color: Colors.green[200],),
),
)
);
}
Widget buildModule(BuildContext context, int index, String module) {
return Container(
height: 45.0,
alignment: Alignment.centerLeft,
margin: EdgeInsets.only(left: 32.0),
child: GestureDetector(
child: Text(module, style: TextStyle(fontSize: 16.0),),
onTap: () {
_showDialog(index, module);
},
),
);
}
void _showDialog(int index, String module) {
switch(index) {
case 0:
_showDialog1(module);
break;
case 1:
_showDialog2(module);
break;
case 2:
_showDialog3(module);
break;
case 3:
_showDialog4(module);
break;
case 4:
_showDialog5(module);
break;
case 5:
_showDialog6(module);
break;
case 6:
_showDialog7(module);
break;
case 7:
_showDialog8(module);
break;
case 8:
_showDialog9(module);
break;
case 9:
_showDialog10(module);
break;
case 10:
_showDialog11(module);
break;
default:
break;
}
}
void _showDialog1(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
content: module,
);
}
);
}
void _showDialog2(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
);
}
);
}
void _showDialog3(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: false,
);
}
);
}
void _showDialog4(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: true,
confirmContent: '去查看'
);
}
);
}
void _showDialog5(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: true,
confirmTextColor: Colors.red[400]
);
}
);
}
void _showDialog6(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: true,
confirmColor: Colors.green[400]
);
}
);
}
void _showDialog7(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: true,
cancelColor: Colors.red[400],
);
}
);
}
void _showDialog8(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: true,
outsideDismiss: false,
);
}
);
}
void _showDialog9(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: true,
confirmCallback: () {
print('-----------点击了确定按钮');
},
);
}
);
}
void _showDialog10(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
title: '这是一个标题',
content: module,
isCancel: true,
dismissCallback: () {
print('-----------弹窗关闭了');
},
);
}
);
}
void _showDialog11(String module) {
showDialog(
context: context,
barrierDismissible: false,
builder: (_) {
return CustomDialog(
image: './images/ic_success.png',
imageHintText: '数据加载成功'
);
}
);
}
}
import 'package:flutter/material.dart';
///自定义Dialog
class CustomDialog extends StatefulWidget {
//------------------不带图片的dialog------------------------
final String title; //弹窗标题
final String content; //弹窗内容
final String confirmContent; //按钮文本
final Color confirmTextColor; //确定按钮文本颜色
final bool isCancel; //是否有取消按钮，默认为true true：有 false：没有
final Color confirmColor; //确定按钮颜色
final Color cancelColor; //取消按钮颜色
final bool outsideDismiss; //点击弹窗外部，关闭弹窗，默认为true true：可以关闭 false：不可以关闭
final Function confirmCallback; //点击确定按钮回调
final Function dismissCallback; //弹窗关闭回调
//------------------带图片的dialog------------------------
final String image;//dialog添加图片
final String imageHintText; //图片下方的文本提示
const CustomDialog({Key key, this.title, this.content, this.confirmContent, this.confirmTextColor, this.isCancel = true, this.confirmColor, this.cancelColor, this.outsideDismiss = true, this.confirmCallback, this.dismissCallback, this.image, this.imageHintText}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _CustomDialogState();
}
}
class _CustomDialogState extends State<CustomDialog> {
_confirmDialog() {
_dismissDialog();
if (widget.confirmCallback != null) {
widget.confirmCallback();
}
}
_dismissDialog() {
if (widget.dismissCallback != null) {
widget.dismissCallback();
}
Navigator.of(context).pop();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;
Column _columnText = Column(
children: <Widget>[
SizedBox(
height: widget.title == null ? 0 : 16.0
),
Text(
widget.title == null ? '' : widget.title,
style: TextStyle(fontSize: 16.0)
),
Expanded(
child: Center(
child: Text(
widget.content == null ? '' : widget.content,
style: TextStyle(fontSize: 14.0)
),
),
flex: 1
),
SizedBox(
height: 1.0,
child: Container(color: Color(0xDBDBDBDB))
),
Container(
height: 45,
child: Row(
children: <Widget>[
Expanded(
child: widget.isCancel ? Container(
decoration: BoxDecoration(
color: widget.cancelColor == null ? Color(0xFFFFFFFF) : widget.cancelColor,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(12.0))
),
child: FlatButton(
child: Text(
'取消',
style: TextStyle(
fontSize: 16.0,
color: widget.cancelColor == null ? Colors.black87 : Color(0xFFFFFFFF),
)
),
onPressed: _dismissDialog,
splashColor: widget.cancelColor == null ? Color(0xFFFFFFFF) : widget.cancelColor,
highlightColor: widget.cancelColor == null ? Color(0xFFFFFFFF) : widget.cancelColor,
),
) : Text(''),
flex: widget.isCancel ? 1 : 0
),
SizedBox(width: widget.isCancel ? 1.0 : 0,child: Container(color: Color(0xDBDBDBDB))),
Expanded(
child: Container(
decoration: BoxDecoration(
color: widget.confirmColor == null ? Color(0xFFFFFFFF) : widget.confirmColor,
borderRadius: widget.isCancel ? BorderRadius.only(bottomRight: Radius.circular(12.0)) : BorderRadius.only(bottomLeft: Radius.circular(12.0), bottomRight: Radius.circular(12.0))
),
child: FlatButton(
onPressed: _confirmDialog,
child: Text(
widget.confirmContent == null ? '确定' : widget.confirmContent,
style: TextStyle(
fontSize: 16.0,
color: widget.confirmColor == null ? (widget.confirmTextColor == null ? Colors.black87 : widget.confirmTextColor) : Color(0xFFFFFFFF),
)
),
splashColor: widget.confirmColor == null ? Color(0xFFFFFFFF) : widget.confirmColor,
highlightColor: widget.confirmColor == null ? Color(0xFFFFFFFF) : widget.confirmColor,
),
),
flex: 1
),
],
)
)
],
);
Column _columnImage = Column(
children: <Widget>[
SizedBox(
height: widget.imageHintText == null ? 35.0 : 23.0,
),
Image(
image: AssetImage(widget.image == null ? '' : widget.image),
width: 72.0,
height: 72.0
),
SizedBox(
height: 10.0
),
Text(
widget.imageHintText == null ? "" : widget.imageHintText,
style: TextStyle(fontSize: 16.0)
),
],
);
return WillPopScope(
child: GestureDetector(
onTap: () => {
widget.outsideDismiss ? _dismissDialog() : null
},
child: Material(
type: MaterialType.transparency,
child: Center(
child: Container(
width: widget.image == null ? width - 100.0 : width - 150.0,
height: 150.0,
alignment: Alignment.center,
child: widget.image == null ? _columnText : _columnImage,
decoration: BoxDecoration(
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.circular(12.0)
),
),
),
),
),
onWillPop: () async {
return widget.outsideDismiss;
}
);
}
}
转载：https://github.com/liyabin1105/flutter_dialog
