Flutter进度展示插件smart_progress_circle的使用

Flutter进度展示插件smart_progress_circle的使用

概述

Circular Progress Bar Flutter插件是一个可自定义的部件，用于显示一个具有交互功能的圆形进度指示器。用户可以通过拖动来调整值，点击以输入新值，并且可以自定义部件的各种方面，包括颜色、大小和样式。此插件适用于需要视觉表示进度或完成度的应用程序。

特性

  • 可定制参数：定义背景色、进度色、标记色、边框色和按钮色。
  • 互动值调整：用户可以通过拖动圆形指示器来调整进度。
  • 输入对话框：点击进度条可以打开对话框进行手动值输入。
  • 响应式设计：自动适应不同的屏幕尺寸和方向。
  • 默认样式：带有合理的默认值，可以轻松覆盖。

截图

安装

要在您的Flutter项目中使用Circular Progress Bar插件，请按照以下步骤操作：

  1. 将依赖项添加到pubspec.yaml文件中：
dependencies:
  flutter:
    sdk: flutter
  smart_progress_circle: ^1.0.0 # 请替换为最新版本
  1. 运行以下命令以安装包：
flutter pub get

使用

要在一个Flutter应用程序中使用CircularProgressBar部件，请导入该包并创建一个带有所需参数的部件实例。

示例

import 'package:flutter/material.dart';
import 'package:smart_progress_circle/smart_progress_circle.dart'; // 根据您的包结构调整导入路径

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Smart Progress Circle Example')),
        body: Center(
          child: SmartProgressCircle(
            minValue: 0,
            maxValue: 10,
            initialValue: 0,
            icon: const Icon(Icons.speed, color: Colors.red), // 设置图标
            calculationCriteria: 'Speed', // 设置进度描述
            onChanged: (value) {
              print("当前值为: $value"); // 回调函数，当值改变时打印当前值
            },
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


smart_progress_circle 是一个 Flutter 插件，用于展示圆形进度条。它可以用来显示加载进度、任务完成度等信息。以下是使用 smart_progress_circle 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  smart_progress_circle: ^0.0.3  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 smart_progress_circle 包：

import 'package:smart_progress_circle/smart_progress_circle.dart';

3. 使用 SmartProgressCircle

你可以使用 SmartProgressCircle 组件来创建一个圆形进度条。以下是一个简单的示例：

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

class ProgressCircleExample extends StatefulWidget {
  [@override](/user/override)
  _ProgressCircleExampleState createState() => _ProgressCircleExampleState();
}

class _ProgressCircleExampleState extends State<ProgressCircleExample> {
  double progress = 0.0;

  void _updateProgress() {
    setState(() {
      progress += 0.1;
      if (progress > 1.0) {
        progress = 0.0;
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SmartProgressCircle Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SmartProgressCircle(
              progress: progress,
              size: 150.0,
              strokeWidth: 10.0,
              backgroundColor: Colors.grey[300],
              progressColor: Colors.blue,
              child: Text(
                '${(progress * 100).toStringAsFixed(0)}%',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _updateProgress,
              child: Text('Update Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: ProgressCircleExample(),
));
回到顶部