flutter_circular_progress_indicator

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個視覺上吸引人的圓形進度指示器，專為Flutter應用設計，旨在提升載入狀態下的使用者體驗。它提供流暢的動畫和可自訂的樣式，非常適合用於資料取得或檔案上傳等任務的進度指示。該套件輕量且相容所有主要平台，包括行動、Web和桌面端。透過pub.dev簡單整合，讓開發者能輕鬆獲得精緻的載入元件，無需複雜設定。

適用情境

表單中的加載指示器
數據獲取進度
檔案上傳/下載追蹤
應用啟動畫面
認證流程進度
後台任務監控

主要特色

流暢的動畫圓形設計
可自定義的顏色和筆畫寬度
與 Flutter 的輕鬆整合
跨平台相容性
支援確定與非確定兩種模式
輕量且高效能

適合對象

尋求吸引人加載介面的開發者
需要一致進度反饋的應用程式
針對多個平台的專案
以使用者介面為導向的 Flutter 應用程式
簡單而優雅的載入元件

使用建議

僅限圓形形狀
無內建文字標籤（需自訂組件包裝）
可能需要額外的樣式以符合品牌一致性的要求
不適用於非圓形進度需求
依賴外部 GitHub 倉庫以取得更新

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Load your data more beautiful.

Fixed Bugs

V 0.0.2 : setState error fixed

Installation

You just need to add flutter_circular_progress_indicator as a dependency in your pubspec.yaml file.

dependencies:
  flutter_circular_progress_indicator: ^0.0.2

Getting started

All features you can use :

Usage

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      spinDuration: Duration(seconds: 3),
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

spin

CircularProgressInd().normalCircular(
                    height: 55,
                    width: 55,
                    valueColor: Colors.deepOrange,
                    valueWidth: 5,
                    isSpining: true,
                  );

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      value: .4,
                      isSpining: true,
                      hasSpinReverse: true,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      backgroundColor: Colors.amber,
                      padding: EdgeInsets.all(10),
                      backgroundBorder:
                          Border.all(color: Colors.deepPurple, width: 3),
                      valueWidth: 6);

 CircularProgressInd().normalCircular(
                      height: 80,
                      width: 80,
                      isSpining: true,
                      value: .01,
                      secondaryColor: const Color.fromARGB(255, 23, 82, 27),
                      secondaryWidth: 10,
                      backgroundShape: BoxShape.rectangle,
                      backgroundRadius: 10,
                      backgroundColor: Colors.green,
                      padding: EdgeInsets.all(10),
                      valueColor: Colors.green[200],
                      backgroundBorder: Border.all(
                          color: const Color.fromARGB(255, 23, 82, 27),
                          width: 3),
                      valueWidth: 6);

搜尋套件、儲存庫與 APP 分類

安裝套件