对话框实现方式选择
方案1：Flutter系统提供的对话框，可用，但是实在难用，效果也不好，基本不选。
方案2：GetX的对话框，常用，但是布局要自己写，适合自定义。
方案3：比如Alert，text input，action sheet等等，这些是常用的，都要自定义，也麻烦，所以最好能找个第三方插件。
插件对比
- 在pub.dev中输入关键字dialog，结果如下：
从这里可以看到，adaptive_dialog 优势明显
- 进去看介绍，最常用Alert，可以看到和原生的很接近，并且iOS和Android有不同的样式，这个非常好。
- 继续浏览，发现一个指标更好的，但是样子却差强人意，不是很喜欢。真不知道这些指标是怎么来的。
- 小结：通过比较，果断选择adaptive_dialog
安装
只需要一条命令就可以
flutter pub add adaptive_dialog
封装
插件提供的是全局函数，可以用，不过还是集中到一个类中比较合适，用类的静态方法比较好。毕竟和log是不一样的。
对话框应该归入工具一类中，放在utils目录下
插件提供的参数还是过多，平时基本上用不到，所以隐藏一些还是好的。
1. 简单的alert
用的最多的就是最简单的alert，有标题，内容，和一个ok按钮，只是展示一条信息。比toast稍微强制一点，需要用户点一下才能消失，保证信息送达。
class DialogUtil {
/// 最简单的Alert，只有一个OK按钮
static void alert({
String? title = 'title',
String? message = 'message',
String? okLabel,
}) {
showOkAlertDialog(
context: Get.context!,
title: title,
message: message,
okLabel: okLabel,
barrierDismissible: false,
);
}
}
因为用了GetX框架，所以context参数直接给Get.context!，方便很多。
这里的参数用了可选类型，并且提供了默认值。必要的时候可以给null，比如没有标题的情况，可以给title参数为null
插件其实还提供了很多参数，感觉都没有必要，所以这里都隐藏了。但是barrierDismissible: false, 这样要求点击ok按钮才能退出，更符合iOS原生的习惯。
是否点了ok按钮没有必要知道，所以这里Future类型的返回值也不要了，直接给了void
- 内容过长的话，会有滑动框，适应性很好。文本对齐方式固定为居中，文本大小，文本样式都不能调整，有点遗憾。
带cancel的alert
一般有OK和cancel两个按钮
/// Alert，有OK和cancel两个按钮
static Future<OkCancelResult> alertWithCancel({
String? title = 'title',
String? message = 'message',
String? okLabel,
String? cancelLabel,
}) {
return showOkCancelAlertDialog(
context: Get.context!,
title: title,
message: message,
okLabel: okLabel,
cancelLabel: cancelLabel,
barrierDismissible: false,
);
}
用户点了那个按钮，通过返回值获得；
OK按钮变红色，使用场景较少，参数不提出。危险操作用另外的action sheet表示更合适。
当然，如果确实有需求，可以到时候再开放这个参数bool isDestructiveAction = false,(给true就是红色的OK按钮)
action sheet单选
做iOS的特别有感觉，很怀念action sheet，感觉是真的好。
/// action sheet 单选
static Future actionSheet({
String? title = 'title',
String? message,
String? cancelLabel,
List<SheetAction> actions = const [],
}) {
return showModalActionSheet(
context: Get.context!,
title: title,
message: message,
actions: actions,
);
}
- 选项采用SheetAction类型。用法看属性名字就可以了。泛型T不是很好用，简单理解为dynamic就行。
class SheetAction<T> {
const SheetAction({
required this.label,
this.key,
this.icon,
this.isDefaultAction = false,
this.isDestructiveAction = false,
});
final String label;
/// Only works for Material Style
final IconData? icon;
/// Used for checking selection result
final T? key;
/// Make font weight to bold(Only works for CupertinoStyle).
final bool isDefaultAction;
/// Make font color to destructive/error color(red).
final bool isDestructiveAction;
}
- 使用的时候，返回的是SheetAction中的key字段，这个字段是dynamic的，很灵活。这个设计很不错。
var result = await DialogUtil.actionSheet(
actions: [
SheetAction(label: 'label1', key: 1),
SheetAction(label: 'label2', key: 'temp'),
SheetAction(label: 'label3', key: {'key': 'value3'})
],
);
log(result);
单个输入框
弹窗输入一串字符，这种场景还是很普遍的。
所以提供一个TextField（可以配置为多行输入）的弹出框还是很有必要的。
/// 文本输入，仅限一个
static Future<String> textInput({
String? title = 'title',
String? message,
String? okLabel,
String? cancelLabel,
String? hintText = 'Please input',
int maxLines = 1,
int? maxLength,
TextInputType? keyboardType,
}) async {
var resultList = await showTextInputDialog(
context: Get.context!,
title: title,
message: message,
okLabel: okLabel,
cancelLabel: cancelLabel,
textFields: [
DialogTextField(
hintText: hintText,
keyboardType: keyboardType,
maxLines: maxLines,
maxLength: maxLength,
)
],
barrierDismissible: false,
);
if (resultList == null) {
return '';
}
if (resultList.isEmpty) {
return '';
}
return resultList.first;
}
- 虽然只有一个TextField，但是可以配置为多行输入
var result = await DialogUtil.textInput(
maxLines: 5,
);
log(result);
- 点cancel的话，返回值是空字符串，去掉了null这种情况，使用的时候可以少判断一次。
其他封装
showTextAnswerDialog使用场景不多，暂时不封装
超过2个按钮的alert，可以封装showAlertDialog，这个场景有，但是不多。
等遇到了再封装，也可以直接使用showAlertDialog对于多个的TextField，遇到的概率也不高，暂时不封装。也可以直接使用插件的showTextInputDialog
小结
这个可以当做默认的alert，action sheet，和单行文本输入方式。
如果要自定义样式，还是封装GetX的dialog和bottom sheet比较好
