Flutter进度管理插件progress_manager的使用

Flutter进度管理插件progress_manager的使用

特性

一个可以管理进度的工具，通过在栈上进行push和pop操作来管理进度。

开始使用

轻松管理多个API调用的进度。

使用方法

首先，将整个项目包裹在ProgressManager中。根据需要进行自定义。在发起API调用之前，调用LoaderProvider().increment()；在API调用完成后，调用LoaderProvider().decrement()。如果栈的大小大于1，则会显示进度；当栈的大小降到0或以下时，进度消失。这简化了对多个API调用的进度管理。此外，在bloc层中使用它时，不依赖上下文会让使用更加方便。

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:bloc_pattern/bloc_pattern.dart'; // 假设使用bloc_pattern作为示例
import 'package:progress_manager/progress_manager.dart'; // 导入progress_manager包

class YourApp extends StatelessWidget {
  const YourApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    Future.delayed(const Duration(seconds: 2), () {
      /// 等待build完成后再执行数据获取
      fetchData();
      fetchDataOther();
    });
    return MultiBlocProvider(
      providers: providers(), // 假设这里有一些bloc provider
      child: MaterialApp(
        /// 这里将整个项目包裹在ProgressManager中
        home: const ProgressManager(
          child: HomeView(),
        ),
      ),
    );
  }
}

Future<List<Station>?> fetchData() async {
  LoaderProvider().increment(); // 开始加载进度
  final response = await _dioClient.get(_getDataPath); // 模拟API调用
  if (response.statusCode == 200) {
    var list = (response.data as List).map((e) => Data.fromJson(e)).toList();
    LoaderProvider().decrement(); // 结束加载进度
    return list;
  } else {
    LoaderProvider().decrement(); // 结束加载进度
    throw Exception('Failed to load data');
  }
  /// 注意：每次increment后都需要对应的decrement，否则进度条可能会一直显示。
}

Future<List<Station>?> fetchDataOther() async {
  LoaderProvider().increment(); // 开始加载进度
  final response = await _dioClient.get(_getDataPathOther); // 模拟另一个API调用
  if (response.statusCode == 200) {
    var list = (response.data as List).map((e) => Data.fromJson(e)).toList();
    LoaderProvider().decrement(); // 结束加载进度
    return list;
  } else {
    LoaderProvider().decrement(); // 结束加载进度
    throw Exception('Failed to load data');
  }
}

更多关于Flutter进度管理插件progress_manager的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter进度管理插件progress_manager的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


progress_manager 是一个用于在 Flutter 中管理进度的插件。它可以帮助你轻松地管理应用的加载、处理、下载等任务的进度。以下是如何使用 progress_manager 插件的详细步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 progress_manager 的依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_manager: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在需要使用 progress_manager 的文件中导入包：

import 'package:progress_manager/progress_manager.dart';

3. 使用 ProgressManager

ProgressManager 是一个单例类，你可以通过 ProgressManager.instance 来访问它。以下是一些常见的用法示例：

3.1 显示进度

你可以使用 ProgressManager 来显示一个进度指示器。例如，在加载数据时显示进度：

void loadData() async {
  ProgressManager.instance.showProgress();

  // 模拟一个耗时的任务
  await Future.delayed(Duration(seconds: 3));

  ProgressManager.instance.hideProgress();
}

3.2 更新进度

你也可以在任务执行过程中更新进度。例如，在下载文件时更新进度：

void downloadFile() async {
  ProgressManager.instance.showProgress();

  for (int i = 0; i <= 100; i += 10) {
    await Future.delayed(Duration(milliseconds: 200));
    ProgressManager.instance.updateProgress(i / 100.0);
  }

  ProgressManager.instance.hideProgress();
}

3.3 自定义进度条

你可以自定义进度条的外观。例如，使用 LinearProgressIndicator 来显示进度：

void customProgress() async {
  ProgressManager.instance.showProgress(
    builder: (context, progress) {
      return LinearProgressIndicator(value: progress);
    },
  );

  for (int i = 0; i <= 100; i += 10) {
    await Future.delayed(Duration(milliseconds: 200));
    ProgressManager.instance.updateProgress(i / 100.0);
  }

  ProgressManager.instance.hideProgress();
}

4. 在 UI 中使用

你可以在任何需要的地方调用 ProgressManager 的方法来显示或隐藏进度。例如，在按钮点击事件中：

ElevatedButton(
  onPressed: () {
    loadData();
  },
  child: Text('Load Data'),
),

5. 处理错误

在任务执行过程中，如果发生错误，你可以使用 ProgressManager 来显示错误信息：

void loadDataWithError() async {
  ProgressManager.instance.showProgress();

  try {
    // 模拟一个可能出错的任务
    await Future.delayed(Duration(seconds: 2));
    throw Exception('Something went wrong');
  } catch (e) {
    ProgressManager.instance.showError(e.toString());
  } finally {
    ProgressManager.instance.hideProgress();
  }
}

6. 自定义错误显示

你可以自定义错误信息的显示方式：

void customError() async {
  ProgressManager.instance.showProgress();

  try {
    // 模拟一个可能出错的任务
    await Future.delayed(Duration(seconds: 2));
    throw Exception('Something went wrong');
  } catch (e) {
    ProgressManager.instance.showError(
      e.toString(),
      builder: (context, error) {
        return AlertDialog(
          title: Text('Error'),
          content: Text(error),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('OK'),
            ),
          ],
        );
      },
    );
  } finally {
    ProgressManager.instance.hideProgress();
  }
}
回到顶部