flutter简单优秀的开源dialog使用free_dialog
前言
今天我来介绍一款简单,易用的dialog,该dialog比较简洁,可以适应很多app(主要没有其他动画及以外的图片等,黑白风格可以适配多种样式的app)。如果你的app急需一款不错的dialog,并且你懒得开发,那么用这款就对了。
开始
集成dialog
dependencies:
  free_dialog: ^0.0.1
 
git地址:https://github.com/smartbackme/free_dialog
简单使用
例1(输入文字框):
FreeDialog(context: context,title: "请输入文字",
                iWidget: EditWidget(_controller!),
                btnOkOnPress: (a){
                  print(a);
                },
                btnCancelOnPress: (){
                },
                onDissmissCallback: (DismissType type){
                  print(type);
                }
            ).show();
          }, child: const Text("输入文字框")),
 
说明:free_dialog 提供了多种Widget 配置(目前有,list&edit两种),可以快速集成。
展示效果如下图:
 
例2(选择框):
FreeDialog(context: context,title: "请选择",
                onDissmissCallback: (DismissType type){
                  print(type);
                },
                iWidget: ListWidget(["123","1233","12312","12312","12312","12312","12312","12312","12312","12312","12312","12312","12312"],(a){
                  print(a);
                },)
            ).show();
          }, child: const Text("选择框")),
 
展示效果如下图:
 
例3(内容多dialog):
FreeDialog(context: context,title: "提示",
                desc: "123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321",
                btnOkOnPress: (a){
                  print(a);
                },
                btnCancelOnPress: (){
                },
                onDissmissCallback: (DismissType type){
                  print(type);
                }
            ).show();
 
展示效果如下图:

例4(内容多dialog,单按钮):
FreeDialog(context: context,title: "提示",
                desc: "123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321",
                btnOkOnPress: (a){
                  print(a);
                },
                onDissmissCallback: (DismissType type){
                  print(type);
                }
            ).show();
 
展示效果如下图:

例5(内容少dialog):
FreeDialog(context: context,title: "提示",
                desc: "111",
                btnOkOnPress: (a){
                  print(a);
                },
                onDissmissCallback: (DismissType type){
                  print(type);
                }
            ).show();
 
展示效果如图:
 
例6(单提示):
FreeDialog(context: context,title: "提示",
                desc: "12312",
                onDissmissCallback: (DismissType type){
                  print(type);
                }
            ).show();
 
展示效果如图所示:
 
例7(禁止退出 dialog):
FreeDialog(context: context,title: "提示",
                desc: "1111",
                dismissOnTouchOutside: false,
                dismissOnBackKeyPress: false,
                btnCancelOnPress: (){
                },
                onDissmissCallback: (DismissType type){
                  print(type);
                }
            ).show();
 
支持的定制
| 属性 | 类型 | 描述 | 默认属性 | 
|---|---|---|---|
| width | double | dialog宽度 | 屏幕窄边的80% | 
| title | String | 设置title | 不传的话默认是没有title的 | 
| desc | String | 设置普通 框的文字内容 | 没有的话不展示,如果有设置body和iwidget的话也不展示 | 
| body | Widget | 自定义widget | Null | 
| context | BuildContext | @required | Null | 
| btnOkText | String | ok文字 | ‘Ok’ | 
| btnOkOnPress | Function | 点击ok | Null (如果传了则会展示ok) | 
| btnOkColor | Color | ok颜色 | Color(0xFF00CA71) | 
| btnOk | Widget | 传一个 ok组件 | null | 
| btnCancelText | String | 取消 | ‘Cancel’ | 
| btnCancelOnPress | Function | 点击取消 | Null (如果传了则会展示cancle) | 
| btnCancelColor | Color | 颜色 取消 | Colors.red | 
| btnCancel | Widget | 传一个cancle组件 | null | 
| dismissOnTouchOutside | bool | 点外部关闭 | true | 
| onDismissCallback | Function | 退出弹框回调 | Null | 
| animType | AnimType | 动画类型 | AnimType.SCALE | 
| alignment | AlignmentGeometry | 排版 | Alignment.center | 
| useRootNavigator | bool | 是否用 useRootNavigator | false | 
| autoHide | Duration | 自动消失 | null | 
| keyboardAware | bool | 是否随着键盘移动(填充键盘区域) | true | 
| dismissOnBackKeyPress | bool | 返回键退出 | true | 
| buttonsBorderRadius | BorderRadiusGeometry | 按钮 Radius | BorderRadius.all(Radius.circular(100) | 
| dialogBackgroundColor | Color | dialog背景 | Theme.of(context).cardColor | 
| borderSide | BorderSide | 整个弹窗形状 | null | 
| iWidget | IWidget | 通用定义widget(源码带有edit和list) | null |