美文网首页Flutter
flutter自定义Alert Dialog弹窗

flutter自定义Alert Dialog弹窗

作者: Faith_K | 来源:发表于2020-03-23 14:48 被阅读0次

    作为一个ios的开发,很瞧不上系统flutter Dialog弹窗太丑了,不过我们可以通过继承Dialog来自定义自己需要的弹窗。


    image.png

    https://www.jianshu.com/p/09fff2e50cbd 底部弹出自定义菜单

    lass AlertWidget extends Dialog{
      String title = '';
      String message = '';
      String  confirm = '确定';
      VoidCallback  confirmCallback;
      VoidCallback cancelCallback;
    
      AlertWidget({this.title,this.message,this.cancelCallback,this.confirmCallback,this.confirm});
      @override
      Widget build(BuildContext context) {
    
        return Material(
    //        type: MaterialType.transparency,
            color: Colors.transparent,
            shadowColor: Colors.transparent,
            child: Center(
              child: Container(
                margin: EdgeInsets.only(left: 40,right: 40),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    SizedBox(height: 16,),
                    Text(title,style: TextStyle(fontSize: 16,fontWeight: FontWeight.w600),),
                    Text(message),
                    SizedBox(height: 16,),
                    Divider(height: 1,),
                    Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(
                              flex: 1,
                            child: Container(
                              child: FlatButton(
                                child: Text('取消'),
                                onPressed: cancelCallback==null?(){Navigator.pop(context);}:cancelCallback,
                              ),
                              decoration: BoxDecoration(
                                border: Border(right: BorderSide(width: 1,color: Color(0xffEFEFF4))),
                              ),
                            )
                          ),
                          Expanded(
                              flex: 1,
                            child: FlatButton(
                              child: Text(confirm,style: TextStyle(color: Colors.black),),
                              onPressed: (){
                                Navigator.pop(context);
                                confirmCallback();
                              },
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
    
              ),
            ),
        );
      }
    }
    
    

    如何使用

          showGeneralDialog(
              context: context,
              pageBuilder: (context, anim1, anim2) {},
              barrierColor: Colors.grey.withOpacity(.4),
              barrierDismissible: true,
              barrierLabel: "",
              transitionDuration: Duration(milliseconds: 125),
              transitionBuilder: (context, anim1, anim2, child) {
                return Transform.scale(
                    scale: anim1.value,
                    child: Opacity(
                      opacity: anim1.value,
                      child: AlertWidget(
                        title: '温馨提示',
                        message: '您确定要退出登录吗?',
                        confirm: '退出登录',
                        confirmCallback: ()async {
                    
    
                        },
                      )
                    ));
              });
    

    相关文章

      网友评论

        本文标题:flutter自定义Alert Dialog弹窗

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