How to design the fuel meter using the Flutter radial gauge (SfRadialGauge)
Description
This article describes how to create the fuel meter using the Flutter radial gauge widget.
Solution
Follow these steps to create the fuel meter using the radial gauge widget.
Step 1: Create the radial gauge widget and add a radial axis.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(),
],
)),
);
}
Step 2: Set the startAngle property as 180 and endAngle property as 0.
axes: <RadialAxis>[ RadialAxis( startAngle: 180, endAngle: 0, ), ]
Step 3: Set the axis property to hide the ticks, labels, and axis line as shown in the following code snippet.
axes: <RadialAxis>[ RadialAxis( startAngle: 180, endAngle: 0, showTicks: false, showAxisLine: false, showLabels: false, ) ]
Step 4: Add the desired number of GaugeRange into the ranges list of the axis.
axes: <RadialAxis>[ RadialAxis( ranges: <GaugeRange>[ GaugeRange( startValue: 0, endValue: 10, startWidth: 10, endWidth: 12.5, color: Colors.red), GaugeRange( startValue: 12, endValue: 20, startWidth: 12.5, endWidth: 15, color: Colors.black), GaugeRange( startValue: 22, endValue: 30, startWidth: 15, endWidth: 17.5, color: Colors.black), GaugeRange( startValue: 32, endValue: 40, startWidth: 17.5, endWidth: 20, color: Colors.black), GaugeRange( startValue: 42, endValue: 50, startWidth: 20, endWidth: 22.5, color: Colors.black), GaugeRange( startValue: 52, endValue: 60, startWidth: 22.5, endWidth: 25, color: Colors.black), GaugeRange( startValue: 62, endValue: 70, startWidth: 25, endWidth: 27.5, color: Colors.black), GaugeRange( startValue: 72, endValue: 80, startWidth: 27.5, endWidth: 30, color: Colors.black), GaugeRange( startValue: 82, endValue: 90, startWidth: 30, endWidth: 32.5, color: Colors.black), GaugeRange( startValue: 92, endValue: 100, startWidth: 32.5, endWidth: 35, color: Colors.black) ], ), ],
Step 4: Add the needle pointer and set the pointer value to point the corresponding value in the axis range.
axes: <RadialAxis>[ RadialAxis( pointers: <GaugePointer>[ NeedlePointer( value: 5, needleEndWidth: 7, needleStartWidth: 1, needleColor: Colors.red, needleLength: 0.85, knobStyle: KnobStyle(color: Colors.black, knobRadius: 0.09)) ], ), ]
You can use the onValueChanged callback of pointer to change the range color based on the current value of pointer.
Step 5: Add the desired widget as GaugeAnnotation into the annotation list of axis to customize their view as fuel meter.
axes: <RadialAxis>[
RadialAxis(annotations: <GaugeAnnotation>[
GaugeAnnotation(
widget: Container(
width: 30.00,
height: 30.00,
decoration: const BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('images/fuel.jpg'),
fit: BoxFit.fill,
),
)),
angle: 270,
positionFactor: 0.35),
GaugeAnnotation(
widget: Text(
'E',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
fontFamily: 'Times'),
),
angle: 175,
positionFactor: 1),
GaugeAnnotation(
widget: Text(
'F',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
fontFamily: 'Times'),
),
angle: 5,
positionFactor: 0.95),
]),
],
Output
