简单的圆形进度条

开源 Flutter 包，简单的圆形进度条。

安装

添加到 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  simple_circular_progress_bar: ^1.0.1

现在在您的代码中，您可以导入

import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';

基本示例

完整的示例请见 此处。大多数示例都在 rows_in_progress_bar_example 文件夹中。

示例编号对应代码中的编号。要在存储库中快速找到示例，请在代码中查找：“示例代码”。

颜色

Example 01, 02, 03

Dart 代码 

// Example 1
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
)

// Example 2
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purple],
),

// Example 3
SimpleCircularProgressBar(
    progressColors: const [
        Colors.cyan,
        Colors.green,
        Colors.amberAccent,
        Colors.redAccent,
        Colors.purpleAccent
    ],
    backColor: Colors.blueGrey,
),

起始角度

Example 04, 05, 06

Dart 代码 

// Example 4
SimpleCircularProgressBar(
    startAngle: 45,
),

// Example 5
SimpleCircularProgressBar(
    startAngle: 90,
),

// Example 6
SimpleCircularProgressBar(
    startAngle: -180,
),

 

线条的粗细

Example 07, 08, 09

Dart 代码 

// Example 7
SimpleCircularProgressBar(
    size: 80,
    progressStrokeWidth: 25,
    backStrokeWidth: 25,
),

// Example 8
SimpleCircularProgressBar(
    progressStrokeWidth: 20,
    backStrokeWidth: 10,
),

// Example 9
SimpleCircularProgressBar(
    backStrokeWidth: 0,
),

合并模式

Example 10, 11, 12

Dart 代码 

// Example 10
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    mergeMode: true,
),

// Example 11
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    fullProgressColor: Colors.deepOrangeAccent,
    mergeMode: true,
),

// Example 12
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purpleAccent],
    mergeMode: true,
),

动画时长

Example 13, 14, 15

如果您不需要动画，请将 animationDuration 设置为 0。

Dart 代码 

// Example 13
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: 1,
),

// Example 14
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: 3,
),

// Example 15
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: 6,
),

文本

Example 16, 17, 18

Dart 代码 

// Example 16
SimpleCircularProgressBar(
    mergeMode: true,
    onGetText: (double value) {
        return Text('${value.toInt()}%');
    },
),

// Example 17
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        return Text(
            '${value.toInt()}',
            style: const TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.white,
            ),
        );
    },
),

// Example 18
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        TextStyle centerTextStyle = TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.greenAccent.withOpacity(value * 0.01),
        );
        
        return Text(
            '${value.toInt()}',
            style: centerTextStyle,
        );
    },
),

Value Notifier 示例

Example value notifier

您可以 此处 阅读有关 ValueNotifier 的工作原理。

示例的源代码可以在 此处 找到。

参数说明

参数 默认值 描述
size double 100 控件大小。
maxValuedouble 100 进度条的最大值。值将在 0 到 [maxValue] 之间变化。
startAngledouble 0 进度倒计开始的角度。
progressStrokeWidthdouble 15 进度线的粗细。
backStrokeWidthdouble 15 背景圆圈的线条粗细。如果您不需要背景圆圈，请将此参数设置为 0。
progressColorsList 进度条可以带渐变或不带渐变。对于渐变，请在 [progressColors] 字段中指定多个颜色，如果不需要渐变，则只指定一种颜色。
fullProgressColorColor 值为 100% 时的圆圈颜色。仅当 [mergeMode] 为 true 时有效。
backColorColor 背景圆圈的颜色。
animationDurationint 6 动画时长（秒）。如果您不需要动画，请将此参数设置为 0。
mergeModebool 假 启用此模式时，值为 100% 的进度条将形成一个完整的圆圈。
valueNotifierValueNotifier 用于更新进度条值的对象。默认情况下，创建一个值为最大值的 ValueNotifier。
onGetTextText Function(double) 用于生成位于进度条中心的新的 Text 控件的回调。回调的输入是进度条的当前值。

YouTube 视频

您可以在此 视频 中看到应用程序的工作原理。

GitHub

查看 Github