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 分类

安装插件