注册

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();

支持的定制



属性类型描述默认属性
widthdoubledialog宽度屏幕窄边的80%
titleString设置title不传的话默认是没有title的
descString设置普通 框的文字内容没有的话不展示,如果有设置body和iwidget的话也不展示
bodyWidget自定义widgetNull
contextBuildContext@requiredNull
btnOkTextStringok文字'Ok'
btnOkOnPressFunction点击okNull (如果传了则会展示ok)
btnOkColorColorok颜色Color(0xFF00CA71)
btnOkWidget传一个 ok组件null
btnCancelTextString取消'Cancel'
btnCancelOnPressFunction点击取消Null (如果传了则会展示cancle)
btnCancelColorColor颜色 取消Colors.red
btnCancelWidget传一个cancle组件null
dismissOnTouchOutsidebool点外部关闭true
onDismissCallbackFunction退出弹框回调Null
animTypeAnimType动画类型AnimType.SCALE
alignmentAlignmentGeometry排版Alignment.center
useRootNavigatorbool是否用 useRootNavigatorfalse
autoHideDuration自动消失null
keyboardAwarebool是否随着键盘移动(填充键盘区域)true
dismissOnBackKeyPressbool返回键退出true
buttonsBorderRadiusBorderRadiusGeometry按钮 RadiusBorderRadius.all(Radius.circular(100)
dialogBackgroundColorColordialog背景Theme.of(context).cardColor
borderSideBorderSide整个弹窗形状null
iWidgetIWidget通用定义widget(源码带有edit和list)null


0 个评论

要回复文章请先登录注册