Marker pointer in Fluter Radial Gauge (SfRadialGauge)

23 Apr 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)]
                    )],
                  )
                ),
              );
            }

    default marker pointer

    Gauge supports the following types of marker:

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

    default marker pointer

    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')]
                    )],
                  )
                ),
              );
            }

    image pointer

    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)
                      )]
                    )],
                  )
                ),
              );
            }

    text pointer

    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 pointer customization

    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)
              ])
            ],
          )),
        );
      }

    marker elevation

    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)
              ])
            ],
          )),
        );
      }

    marker overlay

    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)
              ])
            ],
          )),
        );
      }

    overlay customization

    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
                        )
                      ]
                    )],
                  )
                ),
              );
            }

    marker offset