插件详情v1.0.2

simple_circular_progress_bar

开源的 Flutter 包，简单的圆形进度指示器。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 7200
喜欢数: 194
Pub 分数: 160

安装插件

flutter pub add simple_circular_progress_bar

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个轻量级、开源的 Flutter 包，用于创建简单的圆形进度指示器。它提供了一种简洁且可自定义的方式，以最少的设置来显示加载状态或进度。该包支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。专为寻求复杂进度 UI 替代方案的开发者设计，它提供了流畅的动画和简单的配置选项。适用于表单、数据加载屏幕或任何需要对正在进行的过程提供视觉反馈的场景。

适合场景

加载状态指示器
表单提交进度
数据获取可视化
游戏或应用等级进度
可自定义的 UI 元素

主要特点

简单 API
跨平台支持
流畅的动画
可定制的颜色和尺寸
最少依赖
轻松集成

适合对象

初学者 Flutter 开发者
简单的加载UI
对性能敏感的应用
快速原型设计
需要轻量级进度指示器的应用程序

使用建议

与高级套餐相比，自定义选项有限
无内置文本标签
不适合复杂的进度跟踪
需要手动处理动态值
最适合基本的圆形进度需求

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Simple circular progress bar

Open source Flutter package, simple circular progress bar.

Installing

Add in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  simple_circular_progress_bar: ^1.0.2

Now in your code, you can import:

import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';

Basic examples

See the full example here. Most of the examples are in the rows_in_progress_bar_example folder.

Example numbers correspond to their numbers in the code. To quickly find examples in the repository, look in the code: 'EXAMPLE CODE'.

Colors

Dart code

// 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,
),

Start angle

Dart code

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

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

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

Thickness of the lines

Dart code

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

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

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

Merge mode

Dart code

// 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,
),

Animation time

If you don't need animation, set animationDuration = 0.

Dart code

// Example 13
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(milliseconds: 500),
),

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

// Example 15
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(minutes: 1),
),

Text

Dart code

// 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

You can read about how ValueNotifier works here.

The source code of the example can be found here.

Parameters description

Parameter	Default	Description
size double	100	Widget size.
maxValue double	100	The maximum value of the progress bar. The values will vary from 0 to [maxValue].
startAngle double	0	The angle from which the countdown of progress begins.
progressStrokeWidth double	15	Thickness of the progress line.
backStrokeWidth double	15	Line thickness of the background circle. If you don't need a background circle, set this parameter to 0.
progressColors List		Progress bar can be either with or without a gradient. For a gradient, specify more than one color in the [progressColors] field and if a gradient is not needed specify only one color.
fullProgressColor Color		The color of the circle at 100% value. It only works when [mergeMode] equal to true.
backColor Color		The color of the background circle.
animationDuration int	Duration(seconds: 6)	Animation duration. If you don't need animation, set this parameter to zero Duration.
mergeMode bool	false	When this mode is enabled the progress bar with a 100% value forms a full circle with [fullProgressColor]. If no [fullProgressColor] is specified, the last color from [progressColors] is taken.
valueNotifier ValueNotifier		The object designed to update the value of the progress bar. By default, creates a ValueNotifier with the maximum value.
onGetText Text Function(double)		Callback to generate a new Text widget located in the center of the progress bar. The callback input is the current value of the progress bar.

YouTube video

You can see how the application works from the example in this video.

所属分类

指示器：加载、刷新、进度

源码仓库

Nulllix/simple_circular_progress_bar

simple_circular_progress_bar

☆ 17 星标⑂ 10 复刻

DartHTML

使用此插件的项目

jicsontoh/EcoMateSG

EcoMateSG

☆ 1 星标⑂ 2 复刻

DartC++