alert_tool
A flutter plugin imitates iOS style pop-up window，Provide a variety of highly customized pop-up styles, such as text pop-up, input pop-up, bottom list pop-up, specific location pop-up, etc
Getting Started
1 Add alert_tool latest version under dependencies to your package's pubspec.yaml file.
dependencies:
alert_tool: ^0.0.3
2 You can install packages from the command line:
$ flutter packages get
3 Api Usage
中间弹出的提示弹窗
- Usage
showTipAlert({
required BuildContext context,
///标题
String? title,
///内容
required String content,
///取消按钮描述文字
String? cancelText,
///确定按钮描述文字
String? confirmText,
///取消动作
Function? cancelAction,
///确定动作
required Function confirmAction,
///标题文字样式
TextStyle? titleTextStyle,
///取消按钮文字样式
TextStyle? cancelTextStyle,
///确定按钮文字样式
TextStyle? confirmTextStyle,
///弹窗内容文字样式
TextStyle? contentTextStyle,
}) {
showDialog(
context: context,
builder: (context) {
return AlertView(
title: title,
content: content,
cancelText: cancelText,
confirmText: confirmText,
cancelAction: cancelAction,
confirmAction: confirmAction,
titleTextStyle: titleTextStyle,
cancelTextStyle: cancelTextStyle,
confirmTextStyle: confirmTextStyle,
contentTextStyle: contentTextStyle,
);
},
);
}
- Example
AlertTool.showTipAlert(
context: context,
title: '陈老师发送给你作业笔记',
content: '是否接收',
confirmAction: () async {
print('888q99w88q8w8w98--确定-}')
Navigator.pop(context);
},
);
- 预览
底部弹出的选择提示弹窗
- Usage
showBottomSheet({
required BuildContext context,
///弹窗标题
required String title,
///弹窗选项列表
required List<String> options,
///弹窗标题文字样式
TextStyle? titleTextStyle,
///弹窗选项文字样式
TextStyle? optionTextStyle,
///弹窗取消文字样式
TextStyle? cancelTextStyle,
///弹窗选项选中返回选项内容
required Function(String option) didOptionSelected,
}) {
showCupertinoModalPopup(
context: context,
builder: (context) {
return BottomSheetView(
title: title,
options: options,
titleTextStyle: titleTextStyle,
optionTextStyle: optionTextStyle,
cancelTextStyle: cancelTextStyle,
didOptionSelected: didOptionSelected,
);
},
);
}
- Example
AlertTool.showBottomSheet(
context: context,
title: '请选择性别',
options: [
'男',
'女',
],
didOptionSelected: (value) {
print('7877we787y32yy77823ye7---$value');
Navigator.pop(context);
},
);
- 预览
输入弹窗
- Usage
showInputAlert({
required BuildContext context,
///输入弹窗标题
required String title,
//输入弹窗确定按钮返回输入内容
required Function(String text) confirmAction,
///输入框可输入最大行数
int? maxLines,
///输入框可输入文字最大数
int? maxLength,
///输入框占位符
String? placeholder,
///取消按钮文字描述
String? cancelText,
///确定按钮文字描述
String? confirmText,
///取消按钮动作
Function? cancelAction,
///标题文字样式
TextStyle? titleTextStyle,
///输入框占位符文字样式
TextStyle? placeholderStyle,
///确定按钮文字描述
TextStyle? confirmTextStyle,
///取消按钮文字描述
TextStyle? cancelTextStyle,
}) async {
showDialog(
context: context,
builder: (context) {
return InputView(
title: title,
maxLines: maxLines,
maxLength: maxLength,
placeholder: placeholder,
confirmAction: confirmAction,
titleTextStyle: titleTextStyle,
placeholderStyle: placeholderStyle,
cancelText: cancelText,
confirmText: confirmText,
cancelAction: cancelAction,
confirmTextStyle: confirmTextStyle,
cancelTextStyle: cancelTextStyle,
);
},
);
}
- Example
AlertTool.showInputAlert(
context: context,
title: '提取码',
placeholder: '请输入提取码',
confirmAction: (code) {
print('09xi20yi90wu12yu98zi23---$code');
Navigator.pop(context);
},
);
- 预览
按钮正下方弹窗
- Usage
showPopMenu(
BuildContext context, {
///弹窗view位置上方所在widget的标识
required GlobalKey originKey,
///item数据源
required List<PopModel> itemsData,
///item点击选中时回调
Function(int, PopModel)? clickCallback,
///不展示小三角 默认展示
bool? noTriangle,
///弹窗背景色
Color? backgroundColor,
///默认选中的item标题
String? selectedText,
///item字体颜色
Color? itemTitleColor,
///item图标颜色
Color? itemIconColor,
///item选中时字体颜色
Color? itemSelectedColor,
///item高度 默认50
double? itemHeight,
///item宽度 默认120
double? itemWidth,
///item间隔线颜色
Color? dividerColor,
///小三角高度默认10
double? triangleHeight,
///小三角宽度 默认14
double? triangleWidth,
///列表弹窗最大高度，若设置最大高度则列表可滑动 否则高度自适应
final double? maxHeight,
}) {
showDialog(
context: context,
useSafeArea: false,
barrierDismissible: false,
builder: (context) {
return PopupView(
originKey: originKey,
itemsData: itemsData,
clickCallback: clickCallback,
noTriangle: noTriangle,
selText: selectedText,
bgColor: backgroundColor,
itemHeight: itemHeight,
itemWidth: itemWidth,
itemIconColor: itemIconColor,
itemSelectedColor: itemSelectedColor,
itemTitleColor: itemTitleColor,
triangleWidth: triangleWidth,
triangleHeight: triangleHeight,
dividerColor: dividerColor,
maxHeight: maxHeight,
);
},
);
}
- Example
AlertTool.showPopMenu(
context,
originKey: _rightKey,
itemsData: [
PopModel(name: '发起群聊', icon: Icons.message, id: 1),
PopModel(name: '添加朋友', icon: Icons.add, id: 2),
PopModel(name: '扫一扫', icon: Icons.scanner, id: 3),
PopModel(name: '收付款', icon: Icons.money, id: 4),
],
clickCallback: (index, model) {
print('current-----$index----${model.toString()}');
},
);
- 预览
*带标题以及取消确认的底部弹窗
AlertTool.showBottomPicker(
context: context,
title: '选择年级',
options: [
'一年级',
'二年级',
'三年级',
'四年级',
'五年级',
'六年级',
'七年级',
'八年级',
'九年级',
'十年级',
'十一年级',
'十二年级',
],
didIndexSelected: (index) {
print('7877we787y32yy77823ye7---$index');
Navigator.pop(context);
},
);
Libraries
- alert_tool
- util/alert_view
- util/bottom_sheet_view
- util/cupertino_sheet
- @date: 2021/12/6 2:53 下午 @author: admin @description: dart
- util/input_view
- util/popup_view