美文网首页
flutter 自定义dialog

flutter 自定义dialog

作者: 明天以后就娶你 | 来源:发表于2019-12-31 11:49 被阅读0次
    效果图
    image.png
     import 'package:flutter/material.dart';
    class dialog extends Dialog{
    String title;
    dialog({
    this.title
    });
    final GlobalKey globalKey = GlobalKey(); //获取wigdet宽高
      @override
      Widget build(BuildContext context){
         //创建透明层
         return new Material(
          type: MaterialType.transparency, //透明类型
          child: Center(
            child: Container(
              width: MediaQuery.of(context).size.width-50,
              height: MediaQuery.of(context).size.height/2 -30, //整个wigdet的高度
              child: Stack(
                children: <Widget>[
                  //包含button和曲线的wigdet
              Container(
                alignment: Alignment.bottomCenter,
                width: MediaQuery.of(context).size.width-50,
                height: MediaQuery.of(context).size.height/2 -40,
                margin: EdgeInsets.only(top: 20.0),  //圆圈距离底部布局的距离
                decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25.0),
                ),
                child: Column(
                  children: <Widget>[
                   ClipPath(
                     clipper: BottomClipper(),
                     child: Container(
                       height: MediaQuery.of(context).size.height/4 -60,
                       decoration: new BoxDecoration(
                       color: Colors.orange,
                       borderRadius: BorderRadius.circular(25.0),
                      ),
                     ),
                   ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                      margin: EdgeInsets.all(20.0),
                      child: Text(title),
                    )
                    //按钮
                     ,MaterialButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(20.0))
                  ),
                  height: 25.0,
                  minWidth: MediaQuery.of(context).size.height/2 -60,
                  color: Colors.blue[400],
                  textColor: Colors.white,
                  child: new Text('我知道了',style:new TextStyle(
                    fontSize: 10.0,color: Colors.white
                  ),),
                  onPressed: () {
                    Navigator.pop(context);
                  },
              ),
                      ],
                    )
                  ],
                )
              ), new Container(
                 margin: EdgeInsets.only(left:(MediaQuery.of(context).size.width-50)/2 -25,top: 0),    
                constraints: BoxConstraints.expand(
                  width: 50.0,
                  height: 50.0,
                ),
                decoration: new BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(25.0),
                ),
              ),
                ],
              ),
              decoration: new BoxDecoration(
                  color: Color(0x00000000),
                ),
            ),
          ),
         );
      }
    }
    
    
     //绘制曲线
    class BottomClipper extends CustomClipper<Path>{
      @override
      Path getClip(Size size){
        var path = Path(); 
        path.lineTo(0, 0);  
        path.lineTo(0, size.height - 40.0);  
        var firstControlPoint = Offset(size.width/4, size.height); 
        var firstEndPoint = Offset(size.width/2.25, size.height-30); 
        path.quadraticBezierTo(  
          firstControlPoint.dx, 
          firstControlPoint.dy, 
          firstEndPoint.dx, 
          firstEndPoint.dy);
    
        var secondControlPoint = Offset(size.width/4*3, size.height-90);  
        var secondEndPoint = Offset(size.width, size.height-40); 
        path.quadraticBezierTo( 
          secondControlPoint.dx, 
          secondControlPoint.dy, 
          secondEndPoint.dx, 
          secondEndPoint.dy);
        path.lineTo(size.width, size.height-40);
        path.lineTo(size.width, 0);
        return path;
      }
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }
    ######引用方式
    showDialog(
             context: context,
             builder: (BuildContext context){
              return new dialog(title:"这是一段提示消息");
             }
            );

    相关文章

      网友评论

          本文标题:flutter 自定义dialog

          本文链接:https://www.haomeiwen.com/subject/qqsboctx.html