How to create the various directional semi-circular gauge using the Flutter radial gauge?
Description
This article describes how to create various directional semi-circular gauge using the Flutter radial gauge widget.
Solution
You can create the semi-circular gauge using the radial gauge by adjusting the startAngle and endAngle property of radial axis.
Step 1: Create a radial gauge and add an 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 270 and endAngle property as 90 to show east direction semi-circular gauge.
axes: <RadialAxis>[ RadialAxis( startAngle: 270, canScaleToFit: true, endAngle: 90, interval: 10) ],
Enable the canScaleToFit property of radial axis to fit the gauge in the available size.
Step 3: Set the startAngle property as 90 and endAngle property as 270 and set isInversed property to true to show the west directional semi-circular gauge.
axes: <RadialAxis>[ RadialAxis( startAngle: 90, canScaleToFit: true, endAngle: 270, isInversed: true, interval: 10) ],
Output:
Step 4: Set the startAngle property as 180 and endAngle property to 0 to show the north directional semi-circular gauge.
axes: <RadialAxis>[ RadialAxis( startAngle: 180, canScaleToFit: true, endAngle: 0, interval: 10) ]
Output:
Step 5: Set the startAngle property as 0 and endAngle property as 180. Set isInversed property to axis as true to show the south directional semi-circular gauge.
axes: <RadialAxis>[ RadialAxis( startAngle: 0, canScaleToFit: true, isInversed: true, endAngle: 180, interval: 10) ]
Output:
Conclusion
I hope you enjoyed learning about how how-to-create-the-various-directional-semi-circular-gauge-using-the-flutter-radial-gauge.
