Flutter弹窗提示插件sweetalertv2的使用
sweetalertv2 for flutter.
展示
开始使用
添加依赖
在 pubspec.yaml 文件中添加以下依赖：
dependencies:
sweetalertv2: any然后运行以下命令以更新依赖项：
flutter pub get基本用法
基本用法如图所示：
SweetAlertV2.show(context, title: "Just show a message");带有子标题
带有子标题的示例如下：
SweetAlertV2.show(context,
title: "Just show a message",
subtitle: "Sweet alert is pretty");带有成功状态
带有成功状态的示例如下：
SweetAlertV2.show(context,
title: "Just show a message",
subtitle: "Sweet alert is pretty",
style: SweetAlertV2Style.success);带有确认状态
带有确认状态的示例如下：
SweetAlertV2.show(context,
title: "Just show a message",
subtitle: "Sweet alert is pretty",
style: SweetAlertV2Style.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if (isConfirm) {
SweetAlertV2.show(context, style: SweetAlertV2Style.success, title: "Success");
// 返回 false 以保持对话框打开
return false;
}
});执行一些任务
执行一些任务的示例如下：
SweetAlertV2.show(context,
subtitle: "Do you want to delete this message",
style: SweetAlertV2Style.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlertV2.show(context, subtitle: "Deleting...", style: SweetAlertV2Style.loading);
new Future.delayed(new Duration(seconds: 2),(){
SweetAlertV2.show(context, subtitle: "Success!", style: SweetAlertV2Style.success);
});
}else{
SweetAlertV2.show(context, subtitle: "Canceled!", style: SweetAlertV2Style.error);
}
// 返回 false 以保持对话框打开
return false;
});完整示例代码
以下是一个完整的示例代码，展示了如何使用 sweetalertv2 插件：
import 'package:flutter/material.dart';
import 'package:sweetalertv2/sweetalertv2.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'SweetAlertV2 Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'SweetAlertV2 Example'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: new Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text("基本用法"),
new MaterialButton(
onPressed: () {
SweetAlertV2.show(context, title: "Just show a message");
},
child: new Text("尝试我"),
color: SweetAlertV2.success,
textColor: Colors.white,
),
new Text("带标题和子标题"),
new MaterialButton(
onPressed: () {
SweetAlertV2.show(context,
title: "Just show a message",
subtitle: "Sweet alert is pretty");
},
child: new Text("尝试我"),
color: SweetAlertV2.success,
textColor: Colors.white,
),
new Text("成功消息"),
new MaterialButton(
onPressed: () {
SweetAlertV2.show(context,
title: "Just show a message",
subtitle: "Sweet alert is pretty",
style: SweetAlertV2Style.success);
},
child: new Text("尝试我"),
color: SweetAlertV2.success,
textColor: Colors.white,
),
new Text("带确认按钮的警告消息"),
new MaterialButton(
onPressed: () {
SweetAlertV2.show(
context,
title: "Just show a message",
subtitle: "Sweet alert is pretty",
style: SweetAlertV2Style.confirm,
showCancelButton: true,
// 忽略返回值
onPress: (bool isConfirm) {
if (isConfirm) {
SweetAlertV2.show(context,
style: SweetAlertV2Style.success, title: "Success");
// 返回 false 以保持对话框打开
return false;
}
},
);
},
child: new Text("尝试我"),
color: SweetAlertV2.success,
textColor: Colors.white,
),
new Text("执行耗时任务"),
new MaterialButton(
onPressed: () {
SweetAlertV2.show(
context,
subtitle: "Do you want to delete this message",
style: SweetAlertV2Style.confirm,
showCancelButton: true,
onPress: (bool isConfirm) {
if (isConfirm) {
SweetAlertV2.show(context,
subtitle: "Deleting...",
style: SweetAlertV2Style.loading);
new Future.delayed(new Duration(seconds: 2), () {
SweetAlertV2.show(context,
subtitle: "Success!",
style: SweetAlertV2Style.success);
});
} else {
SweetAlertV2.show(context,
subtitle: "Canceled!",
style: SweetAlertV2Style.error);
}
// 返回 false 以保持对话框打开
return false;
},
);
},
child: new Text("尝试我"),
color: SweetAlertV2.success,
textColor: Colors.white,
),
new Text("执行可能失败的任务"),
new MaterialButton(
onPressed: () {
SweetAlertV2.show(
context,
subtitle: "Do you want to delete this message",
style: SweetAlertV2Style.confirm,
showCancelButton: true,
// 忽略返回值
onPress: (bool isConfirm) {
if (isConfirm) {
// 返回 false 以保持对话框打开
if (isConfirm) {
SweetAlertV2.show(context,
subtitle: "Deleting...",
style: SweetAlertV2Style.loading);
new Future.delayed(new Duration(seconds: 2), () {
SweetAlertV2.show(context,
subtitle: "Job fail!",
style: SweetAlertV2Style.error);
});
} else {
SweetAlertV2.show(context,
subtitle: "Canceled!",
style: SweetAlertV2Style.error);
}
return false;
}
},
);
},
child: new Text("尝试我"),
color: SweetAlertV2.success,
textColor: Colors.white,
),
],
),
));
}
}
1 回复
更多关于Flutter弹窗提示插件sweetalertv2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在 Flutter 中使用 sweetalertv2 插件可以创建漂亮的弹窗提示。sweetalertv2 是一个基于 SweetAlert2 的 Flutter 插件，提供了多种样式的弹窗，包括成功、错误、警告、信息等。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 sweetalertv2 插件的依赖：
dependencies:
flutter:
sdk: flutter
sweetalertv2: ^1.0.0 # 请检查最新版本然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 sweetalertv2 包：
import 'package:sweetalertv2/sweetalertv2.dart';3. 使用 SweetAlertV2
你可以使用 SweetAlertV2.show() 方法来显示弹窗。以下是一些常见的用法示例：
显示成功弹窗
SweetAlertV2.show(
context,
title: "Success!",
subtitle: "Your operation was successful.",
style: SweetAlertV2Style.success,
);显示错误弹窗
SweetAlertV2.show(
context,
title: "Error!",
subtitle: "Something went wrong.",
style: SweetAlertV2Style.error,
);显示警告弹窗
SweetAlertV2.show(
context,
title: "Warning!",
subtitle: "This action cannot be undone.",
style: SweetAlertV2Style.warning,
);显示信息弹窗
SweetAlertV2.show(
context,
title: "Info",
subtitle: "This is an informational message.",
style: SweetAlertV2Style.info,
);显示带有确认按钮的弹窗
SweetAlertV2.show(
context,
title: "Are you sure?",
subtitle: "You won't be able to revert this!",
style: SweetAlertV2Style.warning,
showCancelButton: true,
onPress: (bool isConfirm) {
if (isConfirm) {
// 用户点击了确认按钮
print("Confirmed!");
} else {
// 用户点击了取消按钮
print("Cancelled!");
}
return true; // 返回 true 以关闭弹窗
},
);4. 自定义弹窗
你还可以通过设置 SweetAlertV2.show() 方法的其他参数来自定义弹窗的行为和外观，例如：
title: 弹窗的标题。subtitle: 弹窗的副标题。style: 弹窗的样式（success,error,warning,info）。showCancelButton: 是否显示取消按钮。confirmButtonText: 确认按钮的文本。cancelButtonText: 取消按钮的文本。onPress: 用户点击按钮时的回调函数。
5. 示例代码
以下是一个完整的示例代码，展示了如何使用 sweetalertv2 插件：
import 'package:flutter/material.dart';
import 'package:sweetalertv2/sweetalertv2.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('SweetAlertV2 Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
SweetAlertV2.show(
context,
title: "Are you sure?",
subtitle: "You won't be able to revert this!",
style: SweetAlertV2Style.warning,
showCancelButton: true,
onPress: (bool isConfirm) {
if (isConfirm) {
print("Confirmed!");
} else {
print("Cancelled!");
}
return true;
},
);
},
child: Text('Show Alert'),
),
),
),
);
}
}