How to create the directional compass with the radial gauge widget
Description
This article describes how to create the directional compass using the Flutter radial gauge widget.
Solution
Follow these steps to create a directional compass with the radial gauge widget:
Step 1: Create the radial gauge widget and set the start and the end angle of radial axis as 270 to get full circular axis.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
startAngle: 270,
endAngle: 270,
)
],
)),
);
}
Step 2: Set the minimum and maximum of radial axis to 0 and 80 respectively, with an interval of 10 to display 8 direction values in radial axis.
axes: <RadialAxis>[ RadialAxis( startAngle: 270, endAngle: 270, minimum: 0, maximum: 80, interval: 10) ],
Step 3: Listen to the onLabelCreated callback of radial axis to customize the label text and display the direction in the label as demonstrated in the following code snippet.
axes: <RadialAxis>[RadialAxis(onLabelCreated: handleLabelCreated)],
void handleLabelCreated(AxisLabelCreatedArgs args) {
if (args.text == '80' || args.text == '0') {
args.text = 'N';
} else if (args.text == '10') {
args.text = 'NE';
} else if (args.text == '20') {
args.text = 'E';
} else if (args.text == '30') {
args.text = 'SE';
} else if (args.text == '40') {
args.text = 'S';
} else if (args.text == '50') {
args.text = 'SW';
} else if (args.text == '60') {
args.text = 'W';
} else if (args.text == '70') {
args.text = 'NW';
}
}
Step 5: Add needle pointers to indicate the required direction. Customize the needle color with gradient colors to create an arrow-like effect.
axes: <RadialAxis>[ RadialAxis( pointers: <GaugePointer>[ NeedlePointer( value: 70, gradient: const LinearGradient(colors: <Color>[ Color(0xFFFF6B78), Color(0xFFFF6B78), Color(0xFFE20A22), Color(0xFFE20A22) ], stops: <double>[ 0, 0.5, 0.5, 1 ])), NeedlePointer( gradient: const LinearGradient(colors: <Color>[ Color(0xFFE3DFDF), Color(0xFFE3DFDF), Color(0xFF7A7A7A), Color(0xFF7A7A7A) ], stops: <double>[ 0, 0.5, 0.5, 1 ]), value: 30) ], ) ],
Output:
Conclusion
I hope you enjoyed learning about how to create the directional compass with the Flutter radial gauge widget.
You can refer to our Flutter Radial Gauge feature tour page to learn about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
