| layout | post |
|---|---|
| title | Pointers in Flutter Radial Gauge widget | Syncfusion |
| description | Learn here all about adding and customizing Pointers of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. |
| platform | Flutter |
| control | SfRadialGauge |
| documentation | ug |
Pointer is used to indicate values on an axis. The Syncfusion Flutter Radial Gauge control offers four types of pointers:
Marker pointer
Needle pointer
Range pointer
Widget pointer
All pointers can be customized to meet your specific requirement. You can add multiple pointers to the gauge to indicate multiple values on the same scale. The value of the pointer is set using the value property.
In addition to the default pointer, you can add any number of pointers to an axis by adding then to the pointers collection.
{% highlight dart %}
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: SfRadialGauge( axes: [ RadialAxis( pointers: [ RangePointer(value: 30), MarkerPointer(value: 70), NeedlePointer(value: 60) ] ) ], ) ), ); }
{% endhighlight %}
Pointers can be dragged over the scale to change their values interactively. This can be achieved by clicking and dragging the pointer. To enable or disable pointer dragging, use the enableDragging property.
{% highlight dart %}
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: SfRadialGauge( axes: [ RadialAxis( axisLineStyle: AxisLineStyle( thickness: 30, color: Colors.lightBlueAccent ), showTicks: false, pointers: [ MarkerPointer( value: 30, enableDragging: true, markerWidth: 30, markerHeight: 30, markerOffset: -15, color: Colors.indigo ) ] ) ], ) ), ); }
{% endhighlight %}
onValueChangeStart - Occurs when the pointer dragging begins.
onValueChanging - Occurs before the current drag value is updated as the pointer value. The cancel argument of ValueChangingArgs allows you to prevent the current drag value from being applied to the pointer.
onValueChanged - Occurs whenever the pointer value changes during dragging.
onValueChangeEnd - Occurs when the pointer dragging is completed.
{% highlight dart %}
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: SfRadialGauge( axes: [ RadialAxis( pointers: [ RangePointer( value: 30, enableDragging: true, onValueChanging: onValueChanging, onValueChanged: onValueChanged ) ] ) ], ) ), ); }
void onValueChanging(ValueChangingArgs args) { // Restrict the pointer from moving beyond value 60 if (args.value > 60) { args.cancel = true; } }
void onValueChanged(double value) { // Handle the value change print('Pointer value changed to: $value'); }
{% endhighlight %}
The onCreatePointerRenderer callback used to create a custom pointer in the radial gauge. This callback available only in needlePointer and markerPointer.
{% highlight dart %}
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: SfRadialGauge( axes: [ RadialAxis( pointers: [ MarkerPointer( value: 70, onCreatePointerRenderer: () { return _CustomPointerRenderer(); }, ), ], ), ], ), ), ); }
class _CustomPointerRenderer extends MarkerPointerRenderer { @override void drawPointer( Canvas canvas, PointerPaintingDetails pointerPaintingDetails, SfGaugeThemeData gaugeThemeData, ) { canvas.drawCircle( pointerPaintingDetails.startOffset, 10, Paint()..color = Colors.red, ); } }
{% endhighlight %}
