Flutter弹窗提示插件alert_tool的使用
Flutter弹窗提示插件alert_tool的使用
alert_tool 是一个用于Flutter应用的弹窗提示插件，它模仿iOS风格的弹窗，并提供了多种高度定制化的弹窗样式，如文本提示、输入框提示、底部列表选择等。
开始使用
1. 添加依赖
在你的项目的 pubspec.yaml 文件中添加 alert_tool 插件的最新版本到 dependencies 下：
dependencies:
alert_tool: ^0.0.3
然后运行以下命令以安装依赖包：
flutter packages get
2. API 使用
中间弹出的提示弹窗
使用方式
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,
);
},
);
}
示例
AlertTool.showTipAlert(
context: context,
title: '陈老师发送给你作业笔记',
content: '是否接收',
confirmAction: () async {
print('888q99w88q8w8w98--确定-}');
Navigator.pop(context);
},
);
预览
底部弹出的选择提示弹窗
使用方式
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,
);
},
);
}
示例
AlertTool.showBottomSheet(
context: context,
title: '请选择性别',
options: [
'男',
'女',
],
didOptionSelected: (value) {
print('7877we787y32yy77823ye7---$value');
Navigator.pop(context);
},
);
预览
输入弹窗
使用方式
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,
);
},
);
}
示例
AlertTool.showInputAlert(
context: context,
title: '提取码',
placeholder: '请输入提取码',
confirmAction: (code) {
print('09xi20yi90wu12yu98zi23---$code');
Navigator.pop(context);
},
);
预览
按钮正下方弹窗
使用方式
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,
);
},
);
}
示例
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);
},
);
完整示例Demo
下面是完整的示例代码，展示了如何使用上述所有弹窗类型。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:alert_tool/alert_tool.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
GlobalKey _rightKey = GlobalKey();
GlobalKey _key = GlobalKey();
String selectedText = '';
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
actions: [
Container(
key: _rightKey,
child: Column(
children: [
TextButton.icon(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.cyan),
padding: MaterialStateProperty.all(EdgeInsets.zero),
),
onPressed: () {
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()}');
},
);
},
icon: Padding(
padding: EdgeInsets.only(left: 10),
child: Text('导航弹窗'),
),
label: Icon(Icons.arrow_drop_down),
),
Expanded(
child: Container(
color: Colors.transparent,
),
)
],
),
),
SizedBox(
width: 10,
)
],
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
onPressed: () {
AlertTool.showTipAlert(
context: context,
title: '陈老师发送给你作业笔记',
content: '是否接收',
confirmAction: () async {
print('888q99w88q8w8w98--确定-}');
Navigator.pop(context);
},
);
},
child: Text('文字提示弹窗'),
),
TextButton(
onPressed: () {
AlertTool.showInputAlert(
context: context,
title: '提取码',
placeholder: '请输入提取码',
confirmAction: (code) {
print('09xi20yi90wu12yu98zi23---$code');
Navigator.pop(context);
},
);
},
child: Text('输入提示弹窗'),
),
TextButton(
onPressed: () {
AlertTool.showBottomSheet(
context: context,
title: '请选择性别',
options: [
'男',
'女',
],
didOptionSelected: (value) {
print('7877we787y32yy77823ye7---$value');
Navigator.pop(context);
},
);
},
child: Text('底部列表弹窗'),
),
TextButton(
onPressed: () {
AlertTool.showBottomPicker(
context: context,
title: '选择年级',
options: [
'一年级',
'二年级',
'三年级',
'四年级',
'五年级',
'六年级',
'七年级',
'八年级',
'九年级',
'十年级',
'十一年级',
'十二年级',
],
didIndexSelected: (index) {
print('7877we787y32yy77823ye7---$index');
Navigator.pop(context);
},
);
},
child: Text('底部选择弹窗'),
),
TextButton.icon(
key: _key,
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.cyan),
),
onPressed: () {
AlertTool.showPopMenu(context,
originKey: _key,
selectedText: selectedText,
noTriangle: true,
maxHeight: 200,
itemsData: [
PopModel(name: "发起群聊"),
PopModel(name: '添加朋友'),
PopModel(name: '扫一扫'),
PopModel(name: '收付款'),
PopModel(name: "发起群聊"),
PopModel(name: '添加朋友'),
PopModel(name: '扫一扫'),
PopModel(name: '收付款'),
PopModel(name: "发起群聊"),
PopModel(name: '添加朋友'),
PopModel(name: '扫一扫'),
PopModel(name: '收付款'),
PopModel(name: "发起群聊"),
PopModel(name: '添加朋友'),
PopModel(name: '扫一扫'),
PopModel(name: '收付款'),
PopModel(name: "发起群聊"),
PopModel(name: '添加朋友'),
PopModel(name: '扫一扫'),
PopModel(name: '收付款'),
], clickCallback: (index, model) {
setState(() {
selectedText = model.name;
});
});
},
label: Icon(Icons.arrow_drop_down),
icon: Container(
alignment: Alignment.center,
width: 60,
child: Text(selectedText.isNotEmpty ? selectedText : '中间弹窗'),
),
),
],
),
),
);
}
}
更多关于Flutter弹窗提示插件alert_tool的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter弹窗提示插件alert_tool的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，关于Flutter中的alert_tool插件的使用，以下是一个基本的代码案例，展示了如何使用这个插件来创建弹窗提示。
首先，确保你已经在pubspec.yaml文件中添加了alert_tool的依赖：
dependencies:
flutter:
sdk: flutter
alert_tool: ^最新版本号 # 替换为实际可用的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Dart文件中，你可以按照以下方式使用alert_tool插件：
import 'package:flutter/material.dart';
import 'package:alert_tool/alert_tool.dart'; // 导入alert_tool插件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _showAlert() {
// 使用AlertTool.showAlert方法显示弹窗
AlertTool.showAlert(
context: context,
title: '提示',
content: '这是一个弹窗提示',
cancelButtonText: '取消',
confirmButtonText: '确定',
onCancel: () {
// 取消按钮点击回调
print('取消按钮被点击');
},
onConfirm: () {
// 确定按钮点击回调
print('确定按钮被点击');
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: _showAlert,
child: Text('显示弹窗'),
),
),
);
}
}
在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当点击按钮时，会调用_showAlert方法，该方法使用AlertTool.showAlert来显示一个弹窗提示。弹窗包含标题、内容、取消按钮和确定按钮，并分别为取消和确定按钮设置了点击回调。
请注意，alert_tool插件的具体方法和参数可能会随着版本的更新而有所变化，因此建议查阅最新的官方文档或插件的README文件以获取最准确的信息。如果插件的API有所变动，你可能需要相应地调整代码。
