How to create a segmented radial scale using flutter radial gauge
Description
This article describes how to create a segmented radial scale using the radial gauge widget.
Solution
You can create a segmented radial scale by using the dashed line support to annotate the segmented progress of the radial gauge with the dashArray property of axisLineStyle.
Step 1: Create the radial gauge widget by specifying the start and end angle as 180 and 0, respectively.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SfRadialGauge(axes: <RadialAxis>[
RadialAxis(),
]),
),
);
}
Step 2: To customize the axis line as dashed or segmented line, set the dashArray property of axisLineStyle as shown in the following code snippet.
axes: <RadialAxis>[ RadialAxis( axisLineStyle: AxisLineStyle( dashArray: <double>[50, 3], )) ]
In dashArray property, the first value defines the length of each dash and the second value describes the gap between the dashes in logical pixels.
Step 3: To customize the segmented axis line with the gradient color, set the gradient property of axisLineStyle as demonstrated in the following code snippet.
axes: <RadialAxis>[ RadialAxis( axisLineStyle: AxisLineStyle( dashArray: <double>[50, 3], gradient: const SweepGradient( colors: <Color>[Color(0xFFEE0979), Color(0xFFFF6A00)], stops: <double>[0.25, 0.75]), )) ]
Step 4: Add the marker pointer to indicate the current value on the scale.
axes: <RadialAxis>[ RadialAxis( pointers: <GaugePointer>[ MarkerPointer(value: 75, color: Color(0xFFEE0979)) ], axisLineStyle: AxisLineStyle( dashArray: <double>[50, 3], gradient: const SweepGradient( colors: <Color>[Color(0xFFEE0979), Color(0xFFFF6A00)], stops: <double>[0.25, 0.75]), )) ]
Step 5: To specify the scale range and the current progress value, set the annotation as like the following code example.
axes: <RadialAxis>[ RadialAxis( pointers: <GaugePointer>[ MarkerPointer(value: 75, color: Color(0xFFEE0979)) ], annotations: <GaugeAnnotation>[ GaugeAnnotation( angle: 173, positionFactor: 1, widget: Text( 'Min', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Color(0xFFEE0979)), )), GaugeAnnotation( angle: 7, positionFactor: 1, widget: Text( 'Max', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Color(0xFFEE0979)), )), GaugeAnnotation( angle: 90, verticalAlignment: GaugeAlignment.near, widget: Text( '75%', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Color(0xFFEE0979)), )) ], axisLineStyle: AxisLineStyle( dashArray: <double>[50, 3], gradient: const SweepGradient( colors: <Color>[Color(0xFFEE0979), Color(0xFFFF6A00)], stops: <double>[0.25, 0.75]), )) ]
Output
