arc_gauge 0.1.0

A customizable semicircular arc gauge widget for Flutter. Supports multiple color zones, progress fill up to the current value, and a dot indicator with shadow — ideal for BMI, sleep scores, credit sc [...]

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

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.