flutter简单优秀的开源dialog使用free_dialo
2022-06-10 本文已影响0人
王二蛋和他的狗
前言
今天我来介绍一款简单，易用的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两种），可以快速集成。
展示效果如下图：
Screenshot_2022-06-07-16-49-35-120_com.zkhy.flutterzkhyyj.teacher_example.jpg
例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("选择框")),
展示效果如下图：
Screenshot_2022-06-07-16-49-40-922_com.zkhy.flutterzkhyyj.teacher_example.jpg
例3（内容多dialog）：
FreeDialog(context: context,title: "提示",
desc: "123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321",
btnOkOnPress: (a){
print(a);
},
btnCancelOnPress: (){
},
onDissmissCallback: (DismissType type){
print(type);
}
).show();
展示效果如下图：
Screenshot_2022-06-07-16-49-46-596_com.zkhy.flutterzkhyyj.teacher_example.jpg
例4（内容多dialog，单按钮）：
FreeDialog(context: context,title: "提示",
desc: "123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321123123211231232112312321",
btnOkOnPress: (a){
print(a);
},
onDissmissCallback: (DismissType type){
print(type);
}
).show();
展示效果如下图：
Screenshot_2022-06-07-16-49-53-500_com.zkhy.flutterzkhyyj.teacher_example.jpg
例5（内容少dialog）：
FreeDialog(context: context,title: "提示",
desc: "111",
btnOkOnPress: (a){
print(a);
},
onDissmissCallback: (DismissType type){
print(type);
}
).show();
展示效果如图：
Screenshot_2022-06-07-16-50-01-708_com.zkhy.flutterzkhyyj.teacher_example.jpg
例6（单提示）：
FreeDialog(context: context,title: "提示",
desc: "12312",
onDissmissCallback: (DismissType type){
print(type);
}
).show();
展示效果如图所示：
Screenshot_2022-06-07-16-50-13-327_com.zkhy.flutterzkhyyj.teacher_example.jpg
例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 |
