Widget Pointer in Flutter Radial Gauge (SfRadialGauge)

16 Jul 202111 minutes to read

WidgetPointer allows pointing the desired value with any widget in a scale. You can set the desired widget to its child property to annotate the pointer value.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SfRadialGauge(
        axes: <RadialAxis>[
          RadialAxis(pointers: <GaugePointer>[
            WidgetPointer(
              value: 45,
              child: Container(
                height: 55,
                width: 60,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                  border: Border.all(
                    color: Colors.black,
                    style: BorderStyle.solid,
                    width: 1.0)),
                    child: Column(
                      children: <Widget>[
                        Container(
                            width: 40.00,
                            height: 30.00,
                            decoration: new BoxDecoration(
                              image: new DecorationImage(
                              image: ExactAssetImage('images/sun.png'),
                                fit: BoxFit.fitHeight,
                              ),
                            )),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 2, 0, 0),
                          child: Container(
                            child: Text('45°F',
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 15)),
                          ),
                        )
                      ],
                    )))
          ])
        ],
      )),
    );
  }

Position customization

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

When you set offsetUnit to logical pixel, then the widget 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(pointers: <GaugePointer>[
            WidgetPointer(
                value: 45,
                offset: -27,
                child: Container(
                    height: 55,
                    width: 60,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(15),
                        border: Border.all(
                          color: Colors.black,
                          style: BorderStyle.solid,
                          width: 1.0,
                        )),
                    child: Column(
                      children: <Widget>[
                        Container(
                            width: 40.00,
                            height: 30.00,
                            decoration: new BoxDecoration(
                              image: new DecorationImage(
                                image: ExactAssetImage('images/sun.png'),
                                fit: BoxFit.fitHeight,
                              ),
                            )),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 2, 0, 0),
                          child: Container(
                            child: Text('45°F',
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 15)),
                          ),
                        )
                      ],
                    )))
          ])
        ],
      )),
    );
  }