Flutter简易对话框插件tiny_dialog的使用
Flutter简易对话框插件tiny_dialog的使用
简介
这个插件受到sweetalert2的启发，但非常简单。它可以帮助开发者快速创建各种类型的对话框。
开始使用
添加依赖
在命令行中运行以下命令以添加最新版本的依赖：
$ flutter pub add tiny_dialog或者直接在pubspec.yaml文件中添加：
dependencies:
tiny_dialog: <version>然后执行flutter pub get以安装依赖。
使用方法
简单对话框
成功对话框
TinyDialog.success(
context,
message: "Body message success!",
);完整示例代码
以下是一个完整的示例代码，展示了如何使用tiny_dialog创建不同的对话框类型。
import 'package:flutter/material.dart';
import 'package:tiny_dialog/tiny_dialog.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 HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Tiny Dialog'),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
// 成功对话框
ElevatedButton(
onPressed: () {
TinyDialog.success(
context,
message:
"Message success, Consectetur occaecat esse tempor sit tempor laborum qui velit esse nisi eu. Consequat est fugiat proident mollit laboris aliquip ex reprehenderit.",
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('Success!'),
),
// 信息对话框
ElevatedButton(
onPressed: () {
TinyDialog.info(
context,
message: "Reprehenderit nulla id dolore in.",
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('Info!'),
),
// 警告对话框
ElevatedButton(
onPressed: () {
TinyDialog.warning(
context,
message: "Reprehenderit nulla id dolore in.",
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amber[600],
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('Warning!'),
),
// 错误对话框
ElevatedButton(
onPressed: () {
TinyDialog.error(
context,
message: "Reprehenderit nulla id dolore in.",
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('Error!'),
),
// 确认对话框
ElevatedButton(
onPressed: () {
TinyDialog.confirm(
context,
message: "Reprehenderit nulla id dolore in.",
onConfirm: () {
Navigator.pop(context);
},
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey[800],
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('Confirm!'),
),
// 自定义对话框
ElevatedButton(
onPressed: () {
TinyDialog.custom(
context,
child: Image.network("https://picsum.photos/200/300", height: 200, width: 200, fit: BoxFit.cover,),
onConfirm: () {
Navigator.pop(context);
},
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('Custom!'),
),
],
),
),
);
}
}更多关于Flutter简易对话框插件tiny_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter简易对话框插件tiny_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
tiny_dialog 是一个轻量级的 Flutter 插件，用于快速创建简单的对话框。它提供了一些预定义的对话框样式，使得开发者可以轻松地在应用中显示提示、确认、输入等对话框。
安装 tiny_dialog
首先，你需要在 pubspec.yaml 文件中添加 tiny_dialog 依赖：
dependencies:
flutter:
sdk: flutter
tiny_dialog: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来安装依赖。
使用 tiny_dialog
tiny_dialog 提供了几种常见的对话框类型，包括 SimpleDialog、ConfirmDialog、InputDialog 等。以下是一些基本的使用示例：
1. 显示一个简单的提示对话框
import 'package:flutter/material.dart';
import 'package:tiny_dialog/tiny_dialog.dart';
void showSimpleDialog(BuildContext context) {
TinyDialog.showSimpleDialog(
context: context,
title: '提示',
message: '这是一个简单的提示对话框',
onPressed: () {
// 用户点击确定按钮后的回调
Navigator.of(context).pop();
},
);
}2. 显示一个确认对话框
void showConfirmDialog(BuildContext context) {
TinyDialog.showConfirmDialog(
context: context,
title: '确认',
message: '你确定要执行此操作吗？',
onConfirm: () {
// 用户点击确认按钮后的回调
Navigator.of(context).pop();
print('用户确认了操作');
},
onCancel: () {
// 用户点击取消按钮后的回调
Navigator.of(context).pop();
print('用户取消了操作');
},
);
}3. 显示一个输入对话框
void showInputDialog(BuildContext context) {
TinyDialog.showInputDialog(
context: context,
title: '输入',
message: '请输入一些内容',
onConfirm: (String value) {
// 用户点击确认按钮后的回调，value 是用户输入的内容
Navigator.of(context).pop();
print('用户输入了: $value');
},
onCancel: () {
// 用户点击取消按钮后的回调
Navigator.of(context).pop();
print('用户取消了输入');
},
);
}自定义对话框
tiny_dialog 还允许你自定义对话框的样式和行为。你可以通过 TinyDialog 构造函数来创建自定义的对话框。
void showCustomDialog(BuildContext context) {
TinyDialog(
context: context,
title: '自定义对话框',
content: Column(
children: [
Text('这是一个自定义的对话框'),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('关闭'),
),
],
),
).show();
}