Pointers in Flutter Radial Gauge (SfRadialGauge)

18 Nov 201810 minutes to read

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.

Multiple pointers

By default, no pointer is added to the axis. In addition to the default pointer, you can add any number of pointers to an axis by adding them to the pointers collection.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MultiplePointersExample(),
    );
  }
}

class MultiplePointersExample extends StatelessWidget {
  const MultiplePointersExample();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(
              pointers: <GaugePointer>[
                RangePointer(value: 30),
                MarkerPointer(value: 70),
                NeedlePointer(value: 60)
              ]
            )
          ],
        )
      ),
    );
  }
}

Pointer dragging

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.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PointerDraggingExample(),
    );
  }
}

class PointerDraggingExample extends StatelessWidget {
  const PointerDraggingExample();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(
              axisLineStyle: AxisLineStyle(
                thickness: 30, 
                color: Colors.lightBlueAccent
              ),
              showTicks: false,
              pointers: <GaugePointer>[
                MarkerPointer(
                  value: 30, 
                  enableDragging: true,
                  markerWidth: 30, 
                  markerHeight: 30, 
                  markerOffset: -15,
                  color: Colors.indigo
                )
              ]
            )
          ],
        )
      ),
    );
  }
}

Event

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.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const EventExample(),
    );
  }
}

class EventExample extends StatefulWidget {
  const EventExample();

  @override
  State<EventExample> createState() => _EventExampleState();
}

class _EventExampleState extends State<EventExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(
              pointers: <GaugePointer>[
                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');
  }
}

The onCreatePointerRenderer callback allows you to create a custom pointer in the radial gauge. This callback is available for both the NeedlePointer or MarkerPointer types.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CustomPointerExample(),
    );
  }
}

class _CustomPointerRenderer extends MarkerPointerRenderer {
  @override
  void drawPointer(
    Canvas canvas,
    PointerPaintingDetails pointerPaintingDetails,
    SfGaugeThemeData gaugeThemeData,
  ) {
    canvas.drawCircle(
      pointerPaintingDetails.startOffset,
      10,
      Paint()..color = Colors.red,
    );
  }
}

class CustomPointerExample extends StatelessWidget {
  const CustomPointerExample();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(
              pointers: <GaugePointer>[
                MarkerPointer(
                  value: 70,
                  onCreatePointerRenderer: () {
                    return _CustomPointerRenderer();
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}