flutter简单优秀的开源dialog使用free_dialog
前言
今天我来介绍一款简单,易用的dialog,该dialog比较简洁,可以适应很多app(主要没有其他动画及以外的图片等,黑白风格可以适配多种样式的app)。如果你的app急需一款不错的dialog,并且你懒得开发,那么用这款就对了。
开始
集成dialog
dependencies:
free_dialog: ^0.0.1
git地址:github.com/smartbackme…
简单使用
例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 |