套件詳情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++