How to create the directional compass with the radial gauge widget
Description
This article describes how to create the directional compass with the flutter radial gauge widget.
Solution
The following steps to achieve the directional compass with 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 as 0 and 80 respectively, and set the interval as 10, in order 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 the needle pointers to annotate the required direction and the needle color can be customized with gradient color to give 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:
You can download the demo sample from this link.
