Flutter Gauge Widget Example

This article explains you how to integrate flutter gauge widget like car speedometer in mobile application. You can also check out flutter related articles.

In this flutter example, we are displaying different types of gauges using flutter_gauge package. Flutter Gauge widget has many properties like index, number, secondsMarker, circleColor, counterStyle, end, hand, handSize etc.

 

Add required package in pubspec.yaml file

flutter_gauge: ^1.0.8
 
 

Flutter Gauge Types

In this type of flutter gauge, we set secondsMarker property with secondsAndMinute function. We display flutter gauge with orangeAccent using circleColor property of FlutterGauge widget. We can also customize text of gauge widget using counterStyle property. We can display value of gauge using index property.

FlutterGauge(
secondsMarker: SecondsMarker.secondsAndMinute,
number: Number.endAndCenterAndStart,
circleColor: Colors.orangeAccent,
counterStyle: TextStyle(color: Colors.black, fontSize: 25),
index: 35,
handSize: 20,
end: 100,
),
 
flutter gauge
 

Here we are not displaying seconds marker. So we set value none to secondsMarker property. We are also not displaying numbers by giving value none to number property of flutter gauge widget. We can also set alignment using counterAlign property.

FlutterGauge(
secondsMarker: SecondsMarker.none,
number: Number.none,
circleColor: Colors.lightGreenAccent,
counterStyle: TextStyle(color: Colors.black, fontSize: 25),
index: 45,
hand: Hand.short,
counterAlign: CounterAlign.center,
isDecimal: false
),
 
 
FlutterGauge(
secondsMarker: SecondsMarker.secondsAndMinute,
number: Number.endAndCenterAndStart,
circleColor: Colors.redAccent,
counterStyle: TextStyle(color: Colors.black, fontSize: 25),
index: 85,
hand: Hand.short,
handSize: 25,
end: 100
),
 
 

In this type of gauge UI, we set end value 500. So we can display gauge with values between 0 to 500. If you do not want to display shape around gauge, you can set value false to isCircle property.

FlutterGauge(
secondsMarker: SecondsMarker.minutes,
number: Number.endAndStart,
counterStyle: TextStyle(color: Colors.black, fontSize: 25),
index: 200,
handSize: 25,
end: 500,
isCircle: false,
),
 
flutter gauge
 

We can also display all numbers in gauge widget by giving value Number.all to number property. Here we are displaying number outside of gauge using numberInAndOut property.

FlutterGauge(
secondsMarker: SecondsMarker.secondsAndMinute,
number: Number.all,
counterStyle: TextStyle(color: Colors.black, fontSize: 25),
index: 50,
numberInAndOut: NumberInAndOut.outside,
),
 
 
FlutterGauge(
secondsMarker: SecondsMarker.none,
number: Number.all,
circleColor: Colors.deepOrangeAccent,
counterStyle: TextStyle(color: Colors.black, fontSize: 25),
index: 80,
widthCircle: 10,
),
 
flutter gauge
 

One thought on “Flutter Gauge Widget Example

Leave a Reply