作为一个ios的开发,很瞧不上系统flutter Dialog弹窗太丑了,不过我们可以通过继承Dialog来自定义自己需要的弹窗。
image.png
//www.greatytc.com/p/09fff2e50cbd 底部弹出自定义菜单
lass AlertWidget extends Dialog{
String title = '';
String message = '';
String confirm = '确定';
VoidCallback confirmCallback;
VoidCallback cancelCallback;
AlertWidget({this.title,this.message,this.cancelCallback,this.confirmCallback,this.confirm});
@override
Widget build(BuildContext context) {
return Material(
// type: MaterialType.transparency,
color: Colors.transparent,
shadowColor: Colors.transparent,
child: Center(
child: Container(
margin: EdgeInsets.only(left: 40,right: 40),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(height: 16,),
Text(title,style: TextStyle(fontSize: 16,fontWeight: FontWeight.w600),),
Text(message),
SizedBox(height: 16,),
Divider(height: 1,),
Container(
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
child: FlatButton(
child: Text('取消'),
onPressed: cancelCallback==null?(){Navigator.pop(context);}:cancelCallback,
),
decoration: BoxDecoration(
border: Border(right: BorderSide(width: 1,color: Color(0xffEFEFF4))),
),
)
),
Expanded(
flex: 1,
child: FlatButton(
child: Text(confirm,style: TextStyle(color: Colors.black),),
onPressed: (){
Navigator.pop(context);
confirmCallback();
},
),
)
],
),
)
],
),
),
),
);
}
}
如何使用
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {},
barrierColor: Colors.grey.withOpacity(.4),
barrierDismissible: true,
barrierLabel: "",
transitionDuration: Duration(milliseconds: 125),
transitionBuilder: (context, anim1, anim2, child) {
return Transform.scale(
scale: anim1.value,
child: Opacity(
opacity: anim1.value,
child: AlertWidget(
title: '温馨提示',
message: '您确定要退出登录吗?',
confirm: '退出登录',
confirmCallback: ()async {
},
)
));
});