How to apply the gradient for scale and pointers in the Flutter radial gauge (SfRadialGauge)
Description
This article explains how to set the gradient for radial axis line and pointers in the Flutter radial gauge.
Solution
You can enable the gradient color for radial axis line, range pointer, and needle pointer with their gradient property.
Follow these steps to set gradient color for axis line.
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 desired SweepGradient to the gradient property of axisLineStyle as shown in the following code screenshot.
axes: <RadialAxis>[ RadialAxis( interval: 10, axisLineStyle: AxisLineStyle( gradient: SweepGradient(colors: <Color>[ Color(0xFFE7627D), Color(0xFF231557), Color(0xFF44107A), Color(0xFFFF1361), Color(0xFFFFF800), ], stops: <double>[ 0, 0.25, 0.5, 0.75, 1 ]))) ],
Output
Follow these steps to set gradient color for range and needle pointer.
Step 1: To set the gradient for range pointer, add a range pointer and specify a value for pointer.
axes: <RadialAxis>[ RadialAxis(pointers: <GaugePointer>[ RangePointer( value: 65, ) ]) ],
Step 2: Set the desired SweepGradient to the gradient property of range pointer to customize their color.
pointers: <GaugePointer>[ RangePointer( value: 65, gradient: SweepGradient(colors: <Color>[ Color(0xFFFF8177), Color(0xFFFF867A), Color(0xFFFF8C7F), Color(0xFFCF556C), Color(0xFFB12A5B), ], stops: <double>[ 0, 0.25, 0.5, 0.75, 1 ]), ]
Step 3: To set the gradient for the needle pointer, add a needle pointer and specify a value for pointer. Set the desired LinearGradient to the gradient property of needle pointer to customize their color.
pointers: <GaugePointer>[ NeedlePointer( value: 65, knobStyle: KnobStyle(knobRadius: 0), needleStartWidth: 5, needleEndWidth: 7, lengthUnit: GaugeSizeUnit.factor, needleLength: 0.8, gradient: LinearGradient( colors: <Color>[ Color(0xFFFF8177), Color(0xFFFF867A), Color(0xFFFF8C7F), Color(0xFFCF556C), Color(0xFFB12A5B), ], begin: Alignment.bottomCenter, end: Alignment.topCenter, stops: <double>[0, 0.25, 0.5, 0.75, 1]), ) ]
Output
You can download the sample from this link.
