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

Field	What it does
end	Where this segment ends. The segment starts where the previous one ended (or min, for the first one).
color	The segment's fill color.
label	The text shown for this segment (a number override in boundary mode, or the category name in segmentCenter mode).
showLabel	Set to false to hide just this segment's label. Defaults to true.

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.