arc_gauge

A customizable semicircular arc gauge widget for Flutter. Define any number of color zones, and the gauge fills up to the current value — great for BMI, sleep scores, credit scores, or any range metric.

Features

  • Speedometer-style upper-half arc
  • Multiple color zones with uniform gaps between them
  • Progress fills up to the exact current value within the active zone
  • Dot indicator with white halo and drop shadow
  • Active zone arc is slightly thicker for visual emphasis
  • Fully customizable: size, colors, labels, value display
  • Implicit animations — just change value and the gauge animates automatically
  • No external dependencies beyond Flutter

Preview

ArcGauge animation

Installation

Add to your pubspec.yaml:

dependencies:
  arc_gauge: ^0.1.0

Then run:

flutter pub get

Usage

import 'package:arc_gauge/arc_gauge.dart';

ArcGauge(
  value: 22.5,
  label: 'BMI',
  zones: const [
    ArcZone(from: 10,   to: 18.5, label: 'Underweight', color: Color(0xFF378ADD)),
    ArcZone(from: 18.5, to: 25,   label: 'Normal',      color: Color(0xFF639922)),
    ArcZone(from: 25,   to: 30,   label: 'Overweight',  color: Color(0xFFEF9F27)),
    ArcZone(from: 30,   to: 40,   label: 'Obese',       color: Color(0xFFE24B4A)),
  ],
)

Examples

Sleep score

ArcGauge(
  value: 74,
  label: 'SLEEP SCORE',
  zones: const [
    ArcZone(from: 0,  to: 40,  label: 'Poor',      color: Color(0xFFE24B4A)),
    ArcZone(from: 40, to: 70,  label: 'Fair',       color: Color(0xFFEF9F27)),
    ArcZone(from: 70, to: 90,  label: 'Good',       color: Color(0xFF639922)),
    ArcZone(from: 90, to: 100, label: 'Excellent',  color: Color(0xFF378ADD)),
  ],
)

Credit score

ArcGauge(
  value: 720,
  label: 'CREDIT',
  zones: const [
    ArcZone(from: 300, to: 580, label: 'Poor',      color: Color(0xFFE24B4A)),
    ArcZone(from: 580, to: 670, label: 'Fair',       color: Color(0xFFEF9F27)),
    ArcZone(from: 670, to: 740, label: 'Good',       color: Color(0xFF639922)),
    ArcZone(from: 740, to: 850, label: 'Excellent',  color: Color(0xFF378ADD)),
  ],
)

API Reference

ArcGauge

Parameter Type Default Description
value double required Current value to display. Clamped to the zone range.
zones List<ArcZone> required Ordered list of zones, lowest to highest.
label String '' Small caption above the numeric value. Hidden when empty.
displayValue String? value.toStringAsFixed(1) Overrides the displayed number string.
categoryLabel String? active zone's label Overrides the category text below the number.
inactiveColor Color Color(0xFFE0E4EE) Color for zones not yet reached.
size Size Size(280, 180) Logical size of the widget.
valueStyle TextStyle? null Style merged onto the large numeric value text. Only specify what you want to override.
duration Duration Duration(milliseconds: 600) Animation duration when value changes. Use Duration.zero to disable.
curve Curve Curves.easeInOut Animation easing curve.

ArcZone

Parameter Type Description
from double Lower bound of the zone (inclusive).
to double Upper bound of the zone (exclusive, except the last).
label String Human-readable label shown when this zone is active.
color Color Fill color for this zone when reached.

Zone rules

  • Zones must be listed in ascending order (from → to).
  • Zones should be contiguous: zones[i].to == zones[i+1].from.
  • Values outside the range are clamped to the first or last zone.

License

MIT — see LICENSE.

Libraries

arc_gauge
A customizable semicircular arc gauge widget for Flutter.