range_score_gauge #

A simple Flutter widget for showing a value on a colored, segmented bar — like a risk score, health meter, or progress rating. It comes with a moving marker that points at the current value.

Works two ways:

• Numbers — show the boundary between each segment (e.g. 0 · 36 · 43 · 49 · 56 · 100).
• Categories — show a label in the middle of each segment (e.g. Low · Medium · High).

Install #

dependencies:
  range_score_gauge: <latest_version>

flutter pub get

Quick start #

Numbers on the boundaries #

RangeScoreGauge(
  value: 36,
  min: 0,
  max: 100,
  segments: const [
    GaugeSegment(end: 36, color: Color(0xFFFFD54F)),   // yellow
    GaugeSegment(end: 43, color: Color(0xFFFF8A50)),   // orange
    GaugeSegment(end: 49, color: Color(0xFF66E39C)),   // light green
    GaugeSegment(end: 56, color: Color(0xFF3FBE7A)),   // medium green
    GaugeSegment(end: 100, color: Color(0xFF1F7A4D)),  // dark green
  ],
  labelPosition: GaugeLabelPosition.boundary,
)

Want the very first number (min) shown too? Add showMinLabel: true:

RangeScoreGauge(
  value: 36,
  min: 0,
  max: 100,
  segments: const [/* ... */],
  labelPosition: GaugeLabelPosition.boundary,
  showMinLabel: true,
)

Category labels instead of numbers #

RangeScoreGauge(
  value: 8,
  min: 0,
  max: 100,
  labelPosition: GaugeLabelPosition.segmentCenter,
  segments: const [
    GaugeSegment(end: 33, color: Color(0xFF00C2CB), label: 'Low'),
    GaugeSegment(end: 66, color: Color(0xFF2E9E4F), label: 'Medium'),
    GaugeSegment(end: 100, color: Color(0xFFFF9800), label: 'High'),
  ],
)

Check out example/lib/main.dart for a full working demo with sliders.

Customizing the look #

Add a gap between segments:

RangeScoreGauge(
  value: 36,
  min: 0,
  max: 100,
  segments: const [/* ... */],
  segmentGap: 4,
)

Blend colors into a smooth gradient instead of solid blocks (ignores segmentGap):

RangeScoreGauge(
  value: 36,
  min: 0,
  max: 100,
  segments: const [/* ... */],
  fillStyle: GaugeFillStyle.gradient,
)

Hide a specific segment's label while keeping the others:

GaugeSegment(end: 36, color: Color(0xFFFFD54F), showLabel: false)

Use your own marker instead of the default triangle:

RangeScoreGauge(
  value: value,
  min: 0,
  max: 100,
  segments: segments,
  markerSize: 32,
  markerBuilder: (context, value) => const Icon(Icons.arrow_drop_down),
)

Your marker is automatically resized to fit markerSize, so it never overflows or sinks into the bar.

Change the animation:

RangeScoreGauge(
  value: value,
  min: 0,
  max: 100,
  segments: segments,
  animationDuration: const Duration(milliseconds: 250),
  animationCurve: Curves.easeOut,
)

GaugeSegment fields #

Your segments must be listed in ascending order by end, and the last one must end exactly at your max.

Good to know #

• Wrong setup? Mistakes like an unsorted segment list are caught early with a clear error — but only in debug builds, so there's no cost when you ship.
• Bad live data? If value ever comes through as NaN or your min/max are equal, the gauge quietly falls back to 0 instead of crashing your app.
• Only horizontal bars are supported for now — no vertical or circular gauge yet.

Bugs & Credits #

Report bugs and ask questions on GitHub Issues. Maintained by Dashstack Infotech, Surat.