因为要实现这个效果 自定义了一个Dialog
代码如下:
///自定义弹框
class MyDialog extends Dialog {
MyDialog({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width; //屏幕宽度
double screenHeight = MediaQuery.of(context).size.height; //屏幕高度
double mHorizontalMargin = 45.0; //水平间距
double verticalMargin =
(screenHeight - (screenWidth - 2 * mHorizontalMargin) * 3 / 4) / 2; //垂直间距
return Container(
margin: EdgeInsets.only(
left: mHorizontalMargin,
right: mHorizontalMargin,
top: verticalMargin,
bottom: verticalMargin),
height: double.minPositive,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10))), //圆角
child: Stack(
alignment: Alignment(0, 0), //居中对齐
children: [
Positioned(
top: 5,
right: 5,
child: GestureDetector(
child: Icon(
Icons.close,
color: Colors.grey,
),
onTap: () {
Navigator.of(context).pop();
},
)),
Positioned(
top: 40,
child: Column(
children: [
Text(
'您有未缴纳的订单费用\n为了不影响您使用,请先结清费用',
style: TextStyle(
fontSize: 12,
decoration: TextDecoration.none,
color: Colors.black87,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal),
textAlign: TextAlign.center,
),
Container(
width: 180,
padding: EdgeInsets.only(top: 30),
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
//TODO 跳转到缴费页面
},
color: Color(0xff44c5fe),
child: Text(
'前往缴费',
style: TextStyle(color: Colors.white, fontSize: 11),
),
shape: StadiumBorder(side: BorderSide.none), //按钮形状
),
),
],
),
),
],
),
);
}
_show(BuildContext context) {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return MyDialog();
});
}
}
调用的时候直接
MyDialog()._show(context);
注意,因为我这里Dialog文本是固定的 所以没有抽取 如果大家有这方面的需求 直接可以抽取出来