flutter自定义Alert Dialog弹窗

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


image.png

//www.greatytc.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 {
                

                    },
                  )
                ));
          });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容