Flutter进度对话框插件future_progress_dialog的使用
Flutter进度对话框插件 future_progress_dialog
的使用
future_progress_dialog
是一个用于异步任务的简单进度对话框库。当您调用 showDialog
函数时,进度对话框会显示,并在异步任务完成后自动关闭。
支持的Dart版本
- Dart SDK版本 >= 2.1.0
安装
在 pubspec.yaml
文件中添加依赖:
dependencies:
future_progress_dialog: ^0.2.0
如何使用
导入包
首先,在您的 Dart 文件中导入包:
import 'package:future_progress_dialog/future_progress_dialog.dart';
使用示例
基本使用
您可以调用 showDialog
方法并传递 FutureProgressDialog
及消息文本:
showDialog(
context: context,
builder: (context) => FutureProgressDialog(getFuture(), message: Text('Loading...')),
);
如果您不需要显示消息,可以这样调用:
await showDialog(
context: context,
builder: (context) => FutureProgressDialog(getFuture()),
);
完整示例 Demo
以下是一个完整的示例代码,展示了如何使用 future_progress_dialog
包:
import 'package:flutter/material.dart';
import 'package:future_progress_dialog/future_progress_dialog.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ExampleHome(),
);
}
}
class ExampleHome extends StatelessWidget {
Future<String> getFuture() {
return Future(() async {
await Future.delayed(Duration(seconds: 5));
return 'Hello, Future Progress Dialog!';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Future Progress Dialog'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ElevatedButton(
onPressed: () {
showProgress(context);
},
child: Text('Show Progress Dialog'),
),
ElevatedButton(
onPressed: () {
showProgressWithoutMsg(context);
},
child: Text('Show Progress Dialog Without Message'),
),
ElevatedButton(
onPressed: () {
showProgressWithCustomProgress(context);
},
child: Text('Show Progress Dialog with Custom Progress'),
)
],
),
),
);
}
Future<void> showProgress(BuildContext context) async {
var result = await showDialog(
context: context,
builder: (context) =>
FutureProgressDialog(getFuture(), message: Text('Loading...')),
);
showResultDialog(context, result);
}
Future<void> showProgressWithoutMsg(BuildContext context) async {
var result = await showDialog(
context: context,
builder: (context) => FutureProgressDialog(getFuture()));
showResultDialog(context, result);
}
Future<void> showProgressWithCustomProgress(BuildContext context) async {
var result = await showDialog(
context: context,
builder: (context) => FutureProgressDialog(
getFuture(),
progress: _CustomProgress(),
));
showResultDialog(context, result);
}
void showResultDialog(BuildContext context, String result) {
showDialog(
context: context,
builder: (context) => AlertDialog(
content: Text(result),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
)
],
),
);
}
}
class _CustomProgress extends StatefulWidget {
const _CustomProgress({
Key key,
}) : super(key: key);
@override
__CustomProgressState createState() => __CustomProgressState();
}
class __CustomProgressState extends State<_CustomProgress>
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
void initState() {
super.initState();
controller = AnimationController(
value: 0.0, duration: Duration(milliseconds: 1000), vsync: this);
controller.repeat();
}
@override
void dispose() {
if (controller != null) {
controller.stop();
}
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
child: AnimatedIcon(
icon: AnimatedIcons.add_event,
progress: controller,
),
);
}
}
通过这个示例,您可以轻松地在自己的 Flutter 应用中集成和使用 future_progress_dialog
插件。
更多关于Flutter进度对话框插件future_progress_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter进度对话框插件future_progress_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用 future_progress_dialog
插件在 Flutter 中显示进度对话框的示例代码。future_progress_dialog
是一个方便的插件,用于在 Flutter 应用中显示一个带有进度指示器的对话框,通常用于处理异步任务。
首先,确保在你的 pubspec.yaml
文件中添加 future_progress_dialog
依赖:
dependencies:
flutter:
sdk: flutter
future_progress_dialog: ^x.y.z # 替换为最新版本号
然后运行 flutter pub get
来获取依赖。
接下来,在你的 Dart 文件中,你可以这样使用 FutureProgressDialog
:
import 'package:flutter/material.dart';
import 'package:future_progress_dialog/future_progress_dialog.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Future Progress Dialog Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
// 创建一个 FutureProgressDialog 实例
final FutureProgressDialog progressDialog = FutureProgressDialog(context);
try {
// 显示对话框
await progressDialog.ask(
title: 'Loading',
message: 'Please wait...',
// 模拟一个异步任务
future: Future.delayed(Duration(seconds: 3), () {
// 这里可以返回任何结果
return 'Task Completed';
}),
);
// 当任务完成后,显示结果
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Result: ${progressDialog.result}'),
),
);
} catch (e) {
// 捕获并处理错误
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Error: $e'),
backgroundColor: Colors.red,
),
);
} finally {
// 确保对话框被关闭
await progressDialog.dismiss();
}
},
child: Text('Show Progress Dialog'),
),
),
),
);
}
}
在这个示例中:
- 我们创建了一个简单的 Flutter 应用,其中包含一个按钮。
- 当按钮被点击时,
FutureProgressDialog
被实例化并显示一个加载对话框。 - 对话框显示时,一个模拟的异步任务(使用
Future.delayed
)在后台运行。 - 一旦异步任务完成,对话框将自动关闭,并且结果显示为一个 Snackbar。
- 如果发生错误,也会捕获并显示为一个带有红色背景的 Snackbar。
这个示例展示了如何使用 future_progress_dialog
插件来显示和管理进度对话框,同时处理异步任务的结果和潜在的错误。