Flutter 自定义Dialog

因为要实现这个效果  自定义了一个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: <Widget>[
          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: <Widget>[
                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文本是固定的  所以没有抽取  如果大家有这方面的需求   直接可以抽取出来

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值