How to drag the pointer in the Flutter radial gauge (SfRadialGauge)
Description
This article explains how to drag the pointer in the Flutter radial gauge widget.
Solution
You can enable dragging for the pointer by using the enableDragging property of pointer. Follow these steps to enable pointer interaction.
Step 1: Create a radial gauge widget and add a radial axis into it.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(),
],
)),
);
}
Step 2: Add the range pointer and set the value for the pointer to point the corresponding value in the axis.
axes: <RadialAxis>[ RadialAxis( pointers: <GaugePointer>[ RangePointer( value: 60, ), ], ), ]
Step 3: Set the enableDragging property of range pointer as true to enable dragging for the pointer.
axes: <RadialAxis>[ RadialAxis( pointers: <GaugePointer>[ RangePointer(value: 60, enableDragging: true), ], ), ]
Step 4: Add a Text widget as GaugeAnnotation to display the current pointer value while dragging in the Text widget.
annotations: <GaugeAnnotation>[ GaugeAnnotation( widget: Row( children: <Widget>[ Text( '$_annotationValue', style: TextStyle( fontSize: 16, fontFamily: 'Times', fontWeight: FontWeight.bold, color: const Color(0xFF00A8B5)), ), Text( ' %', style: TextStyle( fontSize: 16, fontFamily: 'Times', fontWeight: FontWeight.bold, color: const Color(0xFF00A8B5)), ) ], ), positionFactor: 0.13, angle: 0) ]
Step 5: To update the current pointer value while dragging in the Text widget of GaugeAnnotation, listen to the onValueChanged callback on RangePointer and set the current pointer value to Text widget inside the callback.
pointers: <GaugePointer>[ RangePointer( value: 60, onValueChanged: handlePointerValueChanged, enableDragging: true, ), ],
void handlePointerValueChanged (double value) {
setState(() {
final int _value = value.toInt();
_annotationValue = '$_value';
});
}
Output
You can download the sample from this link.
