搜索插件、代码仓与 APP 分类

square_progress_bar 封面
插件详情v1.1.1

square_progress_bar

一个方形进度条,您可以轻松使用。只需提供 0.0 到 1.0 范围内的进度,即可立即使用。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
83
喜欢数
29
Pub 分数
150

安装插件

flutter pub add square_progress_bar

插件介绍

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

一个简单且可自定义的方形进度条,适用于 Flutter 应用程序。它接受 0.0 到 1.0 之间的进度值,便于集成到任何需要加载或完成状态视觉反馈的 UI 中。该组件轻量级,支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。非常适合用于表单、文件上传或任何需要简洁现代进度指示器的场景。

适合场景

  • 表单中的加载指示器
  • 文件上传进度跟踪
  • 任务完成可视化
  • 仪表板进度显示
  • 动画引导流程

主要特点

  • 方形设计
  • 从 0.0 到 1.0 的进度
  • 跨平台支持
  • 最小配置
  • 可自定义的颜色和大小
  • 平滑动画

适合对象

  • 简单的进度 UI
  • 轻量级应用
  • 一致的设计系统
  • 快速原型设计
  • 移动和Web应用

使用建议

  • 超出基础样式的定制有限
  • 无内置标签支持
  • 不适用于复杂的进度工作流
  • 需要手动处理动画时序
  • 依赖外部包的更新

原始 README

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

Square progress bar because why not 😎

Build Status

Features

  • Dynamic sizing
  • Animated progress bar
  • Gradient color progress bar
  • Progress bar cap shape customization
  • RTL support
  • ✨Magic✨

alt text

Installation

dependencies:
  square_progress_bar: ^1.1.1

Getting started

Just provide the progress in a range from 0.0 to 1.0 and you are set to go.

Usage

              SquareProgressBar(
                width: 100, // default: max available space
                height: 100, // default: max available space
                progress: _progress, // provide the progress in a range from 0.0 to 1.0
                isAnimation: false, // default: false, animate the progress of the bar
                solidBarColor: Colors.amber, // default: blue, main bar color
                emptyBarColor: Colors.orange.withOpacity(0.2), // default: gray, empty bar color
                strokeWidth: 20, // default: 15, bar width
                barStrokeCap: StrokeCap.round, // default: StrokeCap.round, bar cap shape
                isRtl: false, // default: false, bar start point
                gradientBarColor: const LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: <Color>[Colors.red, Colors.amber],
                  tileMode: TileMode.repeated,
                ), // default: null, if you pass gradient color it will be used instead of solid color for the main bar
                child: Center(
                  child: Text(
                    _percentageLabel,
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              )

License

MIT Free Software, Hell Yeah!

所属分类

源码仓库

使用此插件的项目

暂无相关数据。