flutter 自定义dialog

效果图

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: [
              //包含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: [
               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: [
                    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{
  @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 oldClipper) {
    return false;
  }
}
######引用方式
showDialog(
         context: context,
         builder: (BuildContext context){
          return new dialog(title:"这是一段提示消息");
         }
        );