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 gradient colors for radial axis line, range pointer, and needle pointer using their respective gradient properties.
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 below.
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 the pointer.
axes: <RadialAxis>[ RadialAxis(pointers: <GaugePointer>[ RangePointer( value: 65, ) ]) ],
Step 2: Set the desired SweepGradient to the gradient property of range pointer to customize its 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 its 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.
