A crisp radial progress built from rounded segments with a smooth fill and an optional center label. Fully customizable with 18 parameters, gradient or solid palettes, and buttery animations—perfect for KPI cards, goals, and habit dashboards across Web, iOS, and Android in FlutterFlow.
Functionality
-
Segmented donut ring with adjustable segment count, sweep, and gap.
-
Start angle & direction controls (top/right, clockwise/counter-clockwise).
-
Stroke width & rounded caps for a premium, legible ring at any size.
-
Solid or gradient active palette; neutral inactive track.
-
Center text toggle with configurable color and size (percent or custom).
-
Smooth animation with tunable duration/easing; updates on value change.
-
Threshold-friendly: map colors to success/warning/danger ranges.
-
18 configurable parameters (highlights):
percent
,segments
,segmentSweepDeg
,gapDeg
,startAngleDeg
,strokeWidth
,roundCaps
,useGradient
,activeColor / activeStartColor / activeEndColor
,inactiveColor
,showCenterText
,centerTextColor
,centerTextSize
,animate
,animationDurationMs
, and size enforcement. -
Data-ready: bind to Firestore/Supabase/REST/local state.
-
Themeable & accessible: light/dark support, semantic labels, high contrast.
-
Tested on real devices for smooth, stutter-free rendering.
Great for: KPI dashboards, quota/usage meters, course or task completion, fitness & habit tracking, uptime/health indicators, and onboarding progress.
Keywords: FlutterFlow progress, segmented ring, radial progress, circular progress, donut progress, progress segments, rounded caps, gradient ring, threshold colors, success warning danger, center percentage, start angle, clockwise, counterclockwise, animation duration, smooth easing, KPI widget, goal tracker, habit tracker, quota usage, storage meter, uptime indicator, dashboard component, responsive widget, light mode, dark mode, accessible UI, data binding, Firestore, Supabase, REST API, mobile web, iOS, Android, Flutter widget, customizable parameters, premium UI, modern design.
Segmented Ring Progress Bar
- Fixed price & scope
- Pixel-perfect UI/UX
- App Store & Google Play submission
You may only use this template for one project. For more details, please read the Marketplace Terms of Service.