Flutter弹出菜单插件vader_popup的使用
Flutter弹出菜单插件vader_popup的使用
Vader Popup
Vader Popup 是一个用于轻松创建可定制弹窗对话框和模态窗口的 Flutter 包。
功能
- 简单的模态弹窗
- 完全可定制的弹窗
- 支持多种弹窗类型（信息、警告、错误、成功）
- 支持以下特殊弹窗对话框：
- 询问问题
- 显示长消息
- 输入文本消息
- 选择更多选项
安装
在 pubspec.yaml 文件中添加以下依赖：
dependencies:
vader_popup: ^0.1.2
然后运行：
flutter pub get
使用
基本用法
显示基本弹窗对话框
PopupDialog().info(
context: context,
title: 'Hello, World!',
message: 'This is a basic popup dialog.',
);
显示基本模态弹窗
PopupModal().show(
context,
showCloseButton: true,
body: Center(
child: Text("Hello world!"),
)
);
自定义
Vader Popup 允许进行广泛的自定义以满足您的需求。您可以自定义弹窗的外观和行为。
示例：自定义弹窗
final result = await PopupDialog(
header: const PopupHeader(
icon: Icon(Icons.info, color: Colors.blue, size: 70),
title: PopupText(
text: "Info dialog",
),
),
content: const PopupMessage(
message: PopupText(text: "Text of info dialog"),
),
buttons: [
PopupButton(
label: "Cancel",
color: Colors.grey.withOpacity(0.4),
onPressed: () {
Navigator.of(context).pop("Left button");
},
),
PopupButton(
label: "OK",
color: Colors.blue,
onPressed: () {
Navigator.of(context).pop("Right button");
},
),
],
).show(context);
print(result);
弹窗类型
Vader Popup 支持以下几种内置类型的弹窗：
infosuccesswarningerrormodaloptionsquestionlong message
示例
有关更多示例，请查看 示例文件。
贡献
欢迎提交拉取请求。对于重大更改，请先打开一个问题讨论您想要进行的更改。
作者
👤 Martin Jablečník
- 网站：martin-jablecnik.cz
- Github：@mjablecnik
- 博客：dev.to/mjablecnik
表达支持
如果这个项目帮助了你，请给它点个赞！
许可证
版权所有 © 2024 Martin Jablečník。
该项目已获得 MIT 许可证授权。
下面是完整的示例代码：
import 'package:flutter/material.dart';
import 'package:vader_popup/vader_popup.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
const dialog = PopupDialog();
const modal = PopupModal();
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Center(
child: Column(
children: [
// 显示输入对话框
Button(
text: "Show input dialog",
color: Colors.brown,
onPressed: () async {
dialog.input(
context,
title: "Input dialog",
message: "请输入您的姓名",
label: "姓名",
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入一些文本';
}
return null;
},
).then(print);
},
),
// 显示长消息对话框
Button(
text: "Dialog with long message",
color: Colors.purple,
onPressed: () async {
dialog
.info(
context: context,
title: "长消息对话框",
message: "这是一个很长的消息。",
)
.then(print);
},
),
// 显示选择更多选项对话框
Button(
text: "Choose from more options",
color: Colors.pink,
onPressed: () async {
dialog.choose(
context: context,
title: "选择对话框",
message: "请选择一个选项：",
options: [
PopupOption(
label: "总是",
value: "always",
color: Colors.green.shade800,
),
const PopupOption(
label: "是",
value: "yes",
color: Colors.green,
),
const PopupOption(
label: "可能",
value: "maybe",
),
const PopupOption(
label: "否",
value: "no",
color: Colors.red,
),
PopupOption(
label: "从不",
value: "never",
color: Colors.red.shade800,
),
],
).then(print);
},
),
// 显示信息弹窗对话框
Button(
text: "Show info popup dialog",
onPressed: () async {
dialog
.info(
context: context,
title: "信息对话框",
message: "包裹无法改寄到领取点。",
)
.then(print);
},
),
// 显示成功弹窗对话框
Button(
text: "Show success popup dialog",
color: Colors.green,
onPressed: () async {
dialog
.success(
context: context,
title: "成功对话框",
message: "包裹可以改寄到领取点。",
)
.then(print);
},
),
// 显示警告弹窗对话框
Button(
text: "Show warning popup dialog",
color: Colors.orange,
onPressed: () async {
dialog
.warning(
context: context,
title: "警告对话框",
message: "包裹可以改寄到领取点。",
)
.then(print);
},
),
// 显示错误弹窗对话框
Button(
text: "Show error popup dialog",
color: Colors.red,
onPressed: () async {
dialog
.error(
context: context,
title: "错误对话框",
message: "包裹无法改寄到领取点。",
)
.then(print);
},
),
// 显示问题弹窗对话框
Button(
text: "Show question popup dialog",
color: Colors.lightBlueAccent,
onPressed: () async {
dialog
.question(
context: context,
title: "问题对话框",
message: "您是否要将包裹改寄到领取点？",
)
.then(print);
},
),
// 显示自定义弹窗对话框
Button(
text: "Show custom popup dialog",
onPressed: () async {
final result = await PopupDialog(
header: const PopupHeader(
icon: Icon(Icons.info, color: Colors.blue, size: 70),
title: PopupText(
text: "信息对话框",
),
),
content: const PopupMessage(
message: PopupText(text: "包裹无法改寄到领取点。"),
),
buttons: [
PopupButton(
label: "取消",
color: Colors.grey.withOpacity(0.4),
onPressed: () {
Navigator.of(context).pop("左按钮");
},
),
PopupButton(
label: "确定",
color: Colors.blue,
onPressed: () {
Navigator.of(context).pop("右按钮");
},
),
],
).show(context);
print(result);
},
),
// 显示模态弹窗
Button(
text: "Show modal popup",
color: Colors.deepPurpleAccent,
onPressed: () async {
await modal.show(
context,
padding: const EdgeInsets.all(20),
showCloseButton: true,
body: Container(
width: double.infinity,
padding: const EdgeInsets.only(left: 16),
child: Wrap(
runSpacing: 5,
direction: Axis.vertical,
children: [
const Text(
"测试标题",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
height: 1.2,
letterSpacing: -0.36,
),
),
Text(
"测试描述",
style: TextStyle(
color: Colors.black.withOpacity(0.8),
decoration: TextDecoration.none,
fontSize: 12,
height: 1.4,
letterSpacing: -0.07,
),
),
],
),
),
);
},
),
],
),
),
),
);
}
}
更多关于Flutter弹出菜单插件vader_popup的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter弹出菜单插件vader_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用Flutter中的vader_popup插件来创建弹出菜单的示例代码。这个插件提供了一些方便的方法来创建各种弹出菜单。
首先，确保你已经在pubspec.yaml文件中添加了vader_popup依赖：
dependencies:
flutter:
sdk: flutter
vader_popup: ^latest_version # 请替换为实际的最新版本号
然后，运行flutter pub get来安装依赖。
接下来是一个完整的示例代码，展示如何使用vader_popup来创建一个简单的弹出菜单：
import 'package:flutter/material.dart';
import 'package:vader_popup/vader_popup.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Vader Popup Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Vader Popup Menu Example'),
),
body: Center(
child: VaderPopupButton<String>(
key: UniqueKey(),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blue,
),
padding: EdgeInsets.all(16),
child: Text(
'Show Menu',
style: TextStyle(color: Colors.white),
),
),
items: [
VaderPopupMenuItem(
value: 'Item 1',
child: Text('Item 1'),
),
VaderPopupMenuItem(
value: 'Item 2',
child: Text('Item 2'),
),
VaderPopupMenuItem(
value: 'Item 3',
child: Text('Item 3'),
),
],
onSelected: (value) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Selected: $value'),
),
);
},
),
),
);
}
}
在这个示例中：
- 我们首先创建了一个
MyApp小部件，它是应用程序的根小部件。 MyHomePage是一个包含Scaffold的有状态小部件，其中包含一个应用栏和一个居中的按钮。VaderPopupButton是一个自定义按钮，当用户点击它时，会弹出一个菜单。VaderPopupMenuItem定义了菜单项，每个菜单项都有一个值和一个显示的小部件。onSelected回调在用户选择菜单项时被调用，这里我们使用ScaffoldMessenger.of(context).showSnackBar来显示一个简短的提示消息，告知用户他们选择了哪个菜单项。
这个示例展示了如何使用vader_popup插件来创建一个简单的弹出菜单。你可以根据需要自定义菜单项的样式和行为。
