Flutter自定义对话框Dialog

Flutter自定义对话框Dialog

一、展示

二、完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:js_app/utils/UIDataUtils.dart';

import 'SPDataUtils.dart';

class DialogUtil{
  static Widget show(BuildContext mContext,{String title='提示',bool onlyRight = false,String content='内容',String leftText='取消',String rightText='确定',Function okCallBack,Function cancelCallBack,String okRouteUri="",bool input = false}) {
    showDialog(
        context: mContext,
        builder: (BuildContext context) {
          return SassDialog(title:title,content:content,leftText:leftText,rightText:rightText,onlyRight:onlyRight,okCallBack:okCallBack,cancelCallBack:cancelCallBack,okRouteUri: okRouteUri,input:input);
        }
    );
  }
}

class SassDialog extends Dialog{
  final String title;               //标题
  final String content;             //内容
  final String leftText;            //左边按钮文字
  final String rightText;           //右边按钮文字
  final bool onlyRight;           //右边按钮文字
  final Function okCallBack;        //右边回调
  final Function cancelCallBack;    //左边回调
  final String okRouteUri;          //右边按钮跳转路由
  final bool input;          //是否展示输入框
  SassDialog({this.title,this.content,this.leftText,this.rightText,this.onlyRight,this.okCallBack,this.cancelCallBack,this.okRouteUri,this.input});
  @override
  Widget build(BuildContext dContext) {
    TextEditingController _controller = TextEditingController();
		
    return new Material( //创建透明层
      type: MaterialType.transparency, //透明类型
      //自定义dialog布局
      child: new Center( //保证控件居中效果
        child: Padding(
          padding: EdgeInsets.only(top: ScreenUtil().setHeight(500)),
          child:Column(
            children: <Widget>[
              Container(
                width: ScreenUtil().setWidth(540),
                decoration: ShapeDecoration(
                  color: Color(0xffffffff),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(top: Radius.circular(8.0),
                    ),
                  ),
                ),
                child: Column(
//            crossAxisAlignment: CrossAxisAlignment.center,
//          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                	//标题
                    Padding(padding: EdgeInsets.only(top: ScreenUtil().setHeight(30)),
                      child: Text(title ,style: TextStyle(fontSize: ScreenUtil().setSp(32),fontWeight: FontWeight.w600),),
                    ),
                    //内容
                    Padding(padding:  EdgeInsets.symmetric(vertical: ScreenUtil().setHeight(30),horizontal: ScreenUtil().setWidth(20)),
                      child: input ?  
                      Container(
                      //带输入框，这里的text和hintText都写死了，也可以根据需要传入
                        height: 40,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Text('分类名称',style: TextStyle(fontSize: 15,color: UIDataUtils.color_text_black,fontWeight: FontWeight.w500),),
                            Container(
                              //修饰黑色背景与圆角
                              decoration: BoxDecoration(
                                // border: Border.all(color: Colors.grey, width: 1.0), //灰色的一层边框
                                color: UIDataUtils.color_page,
                                borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
                              ),
                              // alignment: Alignment.center,
                              height: 40,
                              width: ScreenUtil().setWidth(300),
                              padding: EdgeInsets.fromLTRB(10, 0, 0, 2),
                              child: TextField(
                                controller: _controller,
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    hintText: '请输入新增分类',
                                    hintStyle: new TextStyle(
                                        fontSize: 14, color: Color.fromRGBO(187, 187, 187, 1))
                                ),
                                inputFormatters: <TextInputFormatter>[
                                  LengthLimitingTextInputFormatter(6)//限制长度
                                ],
                                style: new TextStyle(fontSize: 14, color: Colors.black),
                              ),
                            ),
                          ],
                        ),
                      ):Text(content,style: TextStyle(fontSize: ScreenUtil().setSp(28),fontWeight: FontWeight.w400),textAlign: TextAlign.center,),
                    ),
                  ],
                ),
              ),
              //按钮区
              Container(
                height: ScreenUtil().setWidth(88),
                width: ScreenUtil().setWidth(540),
                decoration: ShapeDecoration(
                  color: UIDataUtils.color_main,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(bottom: Radius.circular(8.0),
                    ),
                  ),
                ),
                child: onlyRight ?
                //只有确定按钮
                    GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      child: Center(
                        child: Text(rightText,style: TextStyle(color:UIDataUtils.color_white,fontSize: ScreenUtil().setSp(34),fontWeight: FontWeight.w400),),
                      ),
                      onTap: (){
                        if(okCallBack != null){
                        //确认按钮回调
                          okCallBack();
                        }
                        if(okRouteUri.isEmpty){
                          Navigator.of(dContext).pop();
                        }else{
                        //跳转页面，
                          Navigator.of(dContext).pop();
                          Navigator.of(dContext).pushNamed(okRouteUri);
                        }
                      },
                    ):
                 //双按钮
                   Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Expanded(child: Container(
                      decoration: ShapeDecoration(
                        color: UIDataUtils.color_border_grey,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(8.0),
                          ),
                        ),
                      ),
//                      color:UIDataUtils.color_border_grey ,
                      child: GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        child: Container(
                          child:  Center(child:Text(leftText,style: TextStyle(color:UIDataUtils.color_text_black,fontSize: ScreenUtil().setSp(34),fontWeight: FontWeight.w400),),),),
                        onTap: (){
                          Navigator.of(dContext).pop();
                          if(cancelCallBack != null){
                            cancelCallBack();
                          }
                        },
                      )
                    )),
                    Expanded(child: Container(
                      decoration: ShapeDecoration(
                        color: UIDataUtils.color_main,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(8.0),
                          ),
                        ),
                      ),
//                      color:UIDataUtils.color_border_grey ,
                      child: GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        child: Container(
                          child:  Center(child:Text(rightText,style: TextStyle(color:UIDataUtils.color_white,fontSize: ScreenUtil().setSp(34),fontWeight: FontWeight.w400),),),),
                        onTap: (){
                          if(okCallBack != null){
                            if(input){
                            //若带输入框，回调返回输入的内容
                              okCallBack(_controller.text);
                            }else{
                              okCallBack();
                            }
                          }

                          if(okRouteUri.isEmpty){
                            Navigator.of(dContext).pop();
                          }else{
                            Navigator.of(dContext).pop();
                            Navigator.of(dContext).pushNamed(okRouteUri);
                          }
                        },
                      )
                    )),
                  ],
                ),
              ),
            ],
          ) ,
        )
      ),
    );
  }
}

三、调用

 DialogUtil.show(context,content: '你吃饭了吗？',rightText:'吃了',leftText='没吃',
 		okCallBack: () async {
			//吃了
          }，,cancelCallBack: () async {
			//没吃
          });

刚学flutter不久，写的有问题的地方希望多多指教。