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: <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:"这是一段提示消息");
         }
        );
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容