Gradient Ring / 渐变环形组件

Futuristic gradient stroke ring with a highlight dot, optional gap, and a transparent center area for any child widget.

具有上下渐变描边、高亮小圆点、左右透明缺口且可在中心放置子组件的环形装饰控件。

GradientRing screenshot

Features 功能特性

  • Custom radial size, stroke width, and gradient colors 自定义尺寸、描边宽度、渐变颜色
  • Highlight dot with angle, decoration, and shadow controls 高亮点可设置角度、装饰、阴影
  • Optional transparent gaps around the dot 支持在高亮点两侧留出透明缺口
  • Embed any child widget in the center 中心区域可放置任意子组件

Install 安装

Add to your pubspec.yaml:

dependencies:
  gradient_ring: ^1.0.0

Usage 使用示例

GradientRing(
  size: 120,
  strokeWidth: 8,
  colors: const [Color(0xFF89F7FE), Color(0xFF66A6FF)],
  dotAngleDegrees: 135,
  dotGap: 10,
  child: const Icon(Icons.play_arrow_rounded, color: Colors.white, size: 48),
  padding: const EdgeInsets.all(8),
);

Example 示例

Run the bundled demo for multiple presets:

cd example
flutter run

示例应用位于 example/lib/main.dart,展示了不同的渐变、缺口、以及内嵌内容配置。

Changelog 更新记录

See CHANGELOG.md for release notes / 最新版本记录详见 CHANGELOG.md

Libraries

gradient_ring