Flutter进度状态管理插件flutter_progress_status的使用

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

Flutter进度状态管理插件flutter_progress_status的使用

Flutter Progress Status 是一个简单的控件，可以用来显示任务的进度状态。您可以使用提供的属性来自定义其外观。

如何使用

以下是一个基本的示例代码：

ProgressStatus(
  radius: 150, // 设置圆圈的半径大小
  strokeWidth: 20, // 设置轨道的宽度
  fillValue: 50, // 设置填充位置
)

以下是插件的效果图： 效果图1 效果图2

属性说明

  • radius：用于设置圆圈的大小，默认最小值为15.0，默认最大值为设备宽度。
  • fillValue：用于设置填充位置。
  • fillColor：用于设置填充颜色，默认是蓝色。
  • backgroundColor：用于设置轨道背景颜色，默认是灰色。
  • isStrokeCapRounded：用于设置是否将笔画端点设为圆形，默认是true。
  • strokeWidth：用于设置轨道的宽度，默认是5.0。
  • showCenterText：用于显示/隐藏圆圈中间的百分比文本，默认是true。
  • centerTextStyle：用于设置中心文本的样式。
  • centerTextAlignment：用于设置中心文本在圆圈内的位置。
  • animationDuration：用于设置动画的持续时间，默认是1秒。
  • animationCurve：用于设置动画的曲线，默认是Curves.fastOutSlowIn。

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 flutter_progress_status 插件：

import 'package:flutter/material.dart';
import 'package:flutter_progress_status/flutter_progress_status.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Progress Status Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Status Example'),
      ),
      body: Center(
        child: ProgressStatus(
          radius: 150, // 圆圈的半径
          strokeWidth: 20, // 轨道的宽度
          fillValue: 25, // 填充位置
          fillColor: Colors.green, // 填充颜色
          backgroundColor: Colors.grey, // 背景颜色
          isStrokeCapRounded: true, // 是否将笔画端点设为圆形
          showCenterText: true, // 是否显示中心文本
          centerTextStyle: TextStyle(
            fontSize: 24,
            color: Colors.black,
          ), // 中心文本样式
          animationDuration: Duration(seconds: 2), // 动画持续时间
          animationCurve: Curves.easeInOut, // 动画曲线
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个使用 flutter_progress_status 插件来管理 Flutter 应用中进度状态的示例代码。这个插件可以帮助你轻松地在整个应用中管理进度状态（例如上传或下载进度）。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_progress_status 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_progress_status: ^x.y.z  # 请使用最新版本号

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

接下来，我们将展示如何在 Flutter 应用中使用这个插件。

1. 创建全局的进度管理

首先，我们需要创建一个全局的进度管理实例。可以在你的 main.dart 文件中进行初始化：

import 'package:flutter/material.dart';
import 'package:flutter_progress_status/flutter_progress_status.dart';

void main() {
  FlutterProgressStatus.init(context);  // 初始化进度管理
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

2. 使用进度管理功能

接下来，在需要显示进度的地方（例如一个上传按钮的点击事件中），你可以使用 FlutterProgressStatus 的方法来更新进度。

import 'package:flutter/material.dart';
import 'package:flutter_progress_status/flutter_progress_status.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  void handleUpload() async {
    // 显示进度对话框
    FlutterProgressStatus.show(
      title: "Uploading...",
      message: "Please wait...",
      isDeterminate: true,
      totalSteps: 100,
      cancelCallback: () {
        // 用户取消时的回调
        print("Upload cancelled");
      },
    );

    // 模拟上传进度
    for (int i = 0; i <= 100; i++) {
      await Future.delayed(Duration(milliseconds: 100));  // 模拟耗时操作
      FlutterProgressStatus.setValue(i, status: "Uploading $i%");
    }

    // 隐藏进度对话框
    FlutterProgressStatus.hide();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Progress Status Demo"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: handleUpload,
          child: Text("Upload File"),
        ),
      ),
    );
  }
}

解释

  1. 初始化：在 main.dart 文件的 main 函数中，我们通过 FlutterProgressStatus.init(context) 初始化进度管理。

  2. 显示进度对话框：在 handleUpload 方法中，我们使用 FlutterProgressStatus.show 方法来显示一个进度对话框。

  3. 更新进度：在模拟上传进度的循环中，我们使用 FlutterProgressStatus.setValue 方法来更新进度值，并可以传递一个可选的状态信息。

  4. 隐藏进度对话框：上传完成后，通过 FlutterProgressStatus.hide 方法隐藏进度对话框。

这样，你就可以在 Flutter 应用中轻松地使用 flutter_progress_status 插件来管理进度状态了。希望这个示例代码能帮助你理解如何使用这个插件！

回到顶部