Radial gauge

Animated, highly customizable, open-source Flutter gauge indicator widget.

Check out a working example! 🔗

Progress bar and shader support	Multiple zones style	Gradient support

Usage #

Drop a RadialGauge or AnimatedRadialGauge into your widget tree. The gauge fills its parent, so give it a bounded size with a SizedBox (or pass an explicit radius).

Code #

import 'package:flutter/material.dart';
import 'package:gauge_indicator/gauge_indicator.dart';

class GaugeDemo extends StatelessWidget {
  const GaugeDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 280,
      height: 200,
      child: AnimatedRadialGauge(
        duration: const Duration(milliseconds: 800),
        curve: Curves.easeOut,
        // `value` lives on the [min, max] axis defined below.
        value: 65,
        axis: const GaugeAxis(
          min: 0,
          max: 100,
          sweepDegrees: 180,
          style: GaugeAxisStyle(
            thickness: 20,
            background: Color(0xFFDFE2EC),
          ),
          pointer: GaugePointer.needle(
            width: 16,
            height: 100,
            color: Color(0xFF193663),
          ),
          progressBar: GaugeProgressBar.rounded(
            color: Color(0xFFB4C2F8),
          ),
        ),
      ),
    );
  }
}

For colored ranges, custom transformers, and a live playground, see the runnable examples in example/lib/examples/ and the hosted demo.

Output #

Examples #

Click any thumbnail to open it in the hosted playground.


Getting started	Zones	Active zone
Zone labels	Thermometer	Step goal
Voltmeter	Activity rings	Live heart rate
Rank progression	Progress bar shader