Marker pointer in Flutter Radial Gauge (SfRadialGauge)

18 Oct 202112 minutes to read

Different types of markers are used to mark the pointer values in a scale. You can change the marker type using the markerType property.

DART

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

Gauge supports the following types of marker:

• Circle
• Diamond
• Image
• Inverted triangle
• Rectangle
• Text
• Triangle

Image pointer

Image is used to denote the current pointer values instead of shape. It can be achieved by specifying the markerType as image and specifying the imageUrl property of marker pointer.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
              child: SfRadialGauge(
                axes: <RadialAxis>[RadialAxis(
                  pointers: <GaugePointer>[MarkerPointer(value: 60,
                      markerType: MarkerType.image,markerHeight: 30,
                       markerWidth: 30,
                      imageUrl: 'images/pin.png')]
                )],
              )
            ),
          );
        }

Text pointer

Text is used to denote the current pointer value instead of any marker shape. It can be achieved by setting the markerType as text. The provided text can be customized using the textStyle property of marker pointer.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
              child: SfRadialGauge(
                axes: <RadialAxis>[RadialAxis(
                  pointers: <GaugePointer>[MarkerPointer(value: 50,
                      markerType: MarkerType.text, text: 'Average',
                    textStyle: GaugeTextStyle(fontSize: 15,
                     fontWeight: FontWeight.bold,
                        fontStyle: FontStyle.italic)
                  )]
                )],
              )
            ),
          );
        }

Marker Customization

The marker pointer can be customized using the following properties:

• color – Allows to customize the marker color.
• markerHeight – Allows to specify the marker height.
• markerWidth – Allows to specify the marker width.
• borderColor – Allows to specify the border color for the marker.
• borderWidth – Allows to specify the border width of the marker.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
              child: SfRadialGauge(
                axes: <RadialAxis>[RadialAxis(
                  pointers: <GaugePointer>[MarkerPointer(value: 60, 
                  markerHeight: 30, markerWidth: 30,
                      markerType: MarkerType.circle, color: Colors.lightBlue,
                      borderWidth: 3, borderColor: Colors.black)]
                )],
              )
            ),
          );
        }

Marker elevation

The marker pointer can be elevated by rendering its shadow behind it and the z- coordinate position at which the shadow can be positioned relative to the marker can be controlled by the elevation property.

DART

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: SfRadialGauge(
        axes: <RadialAxis>[
          RadialAxis(pointers: <GaugePointer>[
            MarkerPointer(
                value: 60, markerHeight: 20, markerWidth: 20, elevation: 4)
          ])
        ],
      )),
    );
  }

The shadow color of the pointer is black by default and the default value of elevation is 0.

NOTE

The elevation property applies to all the marker types except MarkerType.image and MarkerType.text.

Marker overlay

The marker overlay rendered around the marker when the marker is dragged. When enableDragging property of marker is set as true and while dragging the marker, the overlay will come around the marker pointer.

DART

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: SfRadialGauge(
        axes: <RadialAxis>[
          RadialAxis(pointers: <GaugePointer>[
            MarkerPointer(
                value: 60,
                markerHeight: 20,
                markerWidth: 20,
                enableDragging: true,
                markerType: MarkerType.circle)
          ])
        ],
      )),
    );
  }

By default, the overlayRadius is calculated based on the provided markerHeight and markerWidth property and overlayColor is considered based on marker color. The properties are used to customize the overlay color and its radius,

• overlayColor – Allows customizing the overlay color.

• overlayRadius – Allows customizing the overlay radius.

DART

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: SfRadialGauge(
        axes: <RadialAxis>[
          RadialAxis(pointers: <GaugePointer>[
            MarkerPointer(
                value: 60,
                markerHeight: 20,
                markerWidth: 20,
                enableDragging: true,
                overlayRadius: 15,
                overlayColor: Colors.red.withOpacity(0.12),
                markerType: MarkerType.circle)
          ])
        ],
      )),
    );
  }

NOTE

The marker overlay applies to all the marker types except MarkerType.image and MarkerType.text.

Position customization

The marker pointer can be moved near or far from its actual position using the markerOffset and offsetUnit properties.

When you set offsetUnit to logical pixel, then the marker pointer will be moved based on the logical pixel value. If you set offsetUnit to factor, then provided factor will be multiplied with the axis radius value, and then the pointer will be moved to corresponding value. The default value of offsetUnit is GaugeSizeUnit.logicalPixel.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
              child: SfRadialGauge(
                axes: <RadialAxis>[RadialAxis( radiusFactor: 0.9, centerY: 0.65,
                  pointers: <GaugePointer>[MarkerPointer(value: 60,
                    markerOffset: -5
                    )
                  ]
                )],
              )
            ),
          );
        }