Flutter
Flutter · Arc gauge
Arcline
Progress that springs, not ticks.
An animated arc gauge for Flutter. The fill springs to each new value, a second lap appears past the target, milestone ticks mark what matters and the centre counts along.
Demo
A recording of the demo. Open it in a new tab
What it does
- 01
Spring-driven fill that keeps its velocity when the value changes again
- 02
An over-target lap in its own colour
- 03
Gradient fill, marker ticks and a glowing end knob, all painted
- 04
Reads as a percentage to screen readers; honours reduce motion
Use it
dependencies:
arcline:
git:
url: https://github.com/YagnikBarasiya23/arcline.gitimport 'package:arcline/arcline.dart';
Arcline(
value: eaten, // e.g. 1745
max: target, // e.g. 2454
size: 280,
markers: [target * 0.8],
semanticLabel: 'Calories today',
center: (context, value) => Text('${value.round()} kcal'),
)Every option, the technique behind the motion and the accessibility notes are in the README on GitHub
More components
All 10- Flutter
Get in touch
Open for freelance projects, contract roles and collaborations — mobile apps and full-stack products in particular. WhatsApp gets the fastest reply.
- Phone
- +91 70488 09875
- Based in
- Rajkot, Gujarat, India
- Elsewhere