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