Range Pointer in Fluter Radial Gauge (SfRadialGauge)

23 Apr 20218 minutes to read

A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark the current value.

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

    default range pointer

    The following properties are used to customize the range pointer:

    • color – Customizes the color of range pointer.

    • width - Specifies the width of pointer either in logical pixels or factor.

    • sizeUnit – Specifies whether the width and the pointerOffset are defined in logical pixels or factor.

    The width of the pointer can be specified either in logical pixel or factor. If the sizeUnit is specified as logicalPixel, then the range will be rendered based on the provided pixel value. If the sizeUnitis set as factor, the provided factor value will be multiplied with axis radius. For example, if the width is set as 0.1, then 10% of axis radius is considered as range pointer width.

  • dart
  • @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
                  child: SfRadialGauge(
                    axes: <RadialAxis>[RadialAxis(
                      pointers: <GaugePointer>[RangePointer(value: 30, width: 0.1,
                          color: Colors.indigo, sizeUnit: GaugeSizeUnit.factor
                        )
                      ]
                    )],
                  )
                ),
              );
            }

    range pointer customization

    The default value of SizeUnit is GaugeSizeUnit.logicalPixel.

    Dashed range pointer

    The dashArray property of range pointer allows rendering the dashed range pointer line.

  • dart
  • @override
    Widget build(BuildContext context) {
       return Scaffold(
          body: Center(
            child: SfRadialGauge(
                axes: <RadialAxis>[
                  RadialAxis(pointers: <GaugePointer>[
                   RangePointer(value: 60, dashArray: <double>[8, 2])
              ])
             ]
            ),
          ),
        );
      }

    range pointer dasharray

    Gradient support

    The gradient property of range pointer allows to specify the smooth color transition to pointer by specifying the different colors based on provided factor value.

  • dart
  • @override
    Widget build(BuildContext context) {
       return Scaffold(
          body: Center(
            child: SfRadialGauge(
                axes:<RadialAxis>[RadialAxis( 
                    axisLineStyle: AxisLineStyle(thickness: 0.1,
                      thicknessUnit: GaugeSizeUnit.factor,),
                  pointers: <GaugePointer>[RangePointer(
                    value: 40, width: 0.1, sizeUnit: GaugeSizeUnit.factor,
                    gradient: const SweepGradient(
                        colors: <Color>[Color(0xFFCC2B5E), Color(0xFF753A88)],
                        stops: <double>[0.25, 0.75]
                    ),
                  )]
                ),
              ]
            ),
          ),
        );
      }

    range pointer gradient

    Corner customization

    The cornerStyle property of range pointer specifies the corner type for pointer. The corners can be customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is bothFlat.

  • dart
  • @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
                  child: SfRadialGauge(
                    axes: <RadialAxis>[RadialAxis(pointers:<GaugePointer>[RangePointer(value: 30, 
                    cornerStyle: CornerStyle.bothCurve)]
                    )],
                  )
                ),
              );
            }

    range pointer customization

    Position customization

    The range pointer can be moved far or near to the axis line using the pointerOffset property. The pointerOffset can be set either in logical pixel or factor value using its sizeUnit. The sizeUnit property is common for bothwidth and pointerOffset

  • dart
  • @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
                  child: SfRadialGauge(
                    axes: <RadialAxis>[RadialAxis( 
                      pointers: <GaugePointer>[RangePointer(value: 30, pointerOffset: 50)]
                    )],
                  )
                ),
              );
            }

    pointer position customization

    When you set the sizeUnit as logical pixel, the pointer will be moved to the provided logical pixel value.

    If the sizeUnit is specified as factor, the factor value will be multiplied with the axis radius. For example, if you set pointerOffset as 0.1, then the pointer offset is considered as 10% of axis radius.