Flutter进度对话框插件future_progress_dialog的使用

发布于 1周前 作者 ionicwang 来自 Flutter

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

1 回复

更多关于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'),
          ),
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们创建了一个简单的 Flutter 应用,其中包含一个按钮。
  2. 当按钮被点击时,FutureProgressDialog 被实例化并显示一个加载对话框。
  3. 对话框显示时,一个模拟的异步任务(使用 Future.delayed)在后台运行。
  4. 一旦异步任务完成,对话框将自动关闭,并且结果显示为一个 Snackbar。
  5. 如果发生错误,也会捕获并显示为一个带有红色背景的 Snackbar。

这个示例展示了如何使用 future_progress_dialog 插件来显示和管理进度对话框,同时处理异步任务的结果和潜在的错误。

回到顶部