Flutter自定义Dialog

  • Flutter自带的dialog一般还是能够满足一般的开发需求,但是对于我们来说肯定是不够用,这个时候我们想到的肯定是自定义,在flutter中要想创建自己的dialog还是比较简单的
  1. 第一步继承Dialog类
  2. 在build方法里面写上自己的布局

代码如下(直接上代码比较清晰)

  import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:me_flutter/res/colors.dart';

class SureDialog extends Dialog {
  String message;
  Function onCloseEvent;
  Function sureEvent;

  SureDialog({this.message, this.onCloseEvent, this.sureEvent});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTap: () {
        Navigator.pop(context);
      },
      child: Material(
        type: MaterialType.transparency,//设置透明的效果
        child: Center( // 让子控件显示到中间
          child: SizedBox( //比较常用的一个控件,设置具体尺寸
            width: ScreenUtil().setWidth(600),
            height: ScreenUtil().setHeight(400),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    alignment: Alignment.topCenter,
                    margin: EdgeInsets.only(top: 61),
                    child: Text(
                      message,
                      style: TextStyle(
                          fontSize: ScreenUtil().setSp(36),
                          color: MyColors.app_484848),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(bottom: 13),
                    padding: EdgeInsets.only(left: 6, right: 6),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        OutlineButton(
                          onPressed: onCloseEvent,
                          padding: EdgeInsets.only(
                              left: 49, top: 14, right: 49, bottom: 14),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10)),
                          child: Text(
                            '取消',
                            style: TextStyle(
                              color: MyColors.app_22b2e1,
                              fontSize: ScreenUtil().setSp(36),
                            ),
                          ),
                          borderSide:
                              BorderSide(color: MyColors.app_22b2e1, width: 1),
                        ),
                        RaisedButton(
                          onPressed: sureEvent,
                          color: MyColors.app_22b2e1,
                          elevation: 0.2,
                          highlightElevation: 0.2,
                          padding: EdgeInsets.only(
                              left: 49, top: 14, right: 49, bottom: 14),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: Text(
                            '确定',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: ScreenUtil().setSp(36)),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

布局效果