A Pointer with border?

[sostenesgomes]

Hello, thanks for this awesome flutter graphics pack. I searched, but did not find a way to determine a pointer with a border, as shown below in the image. Is there a way to get to this design?

[PreethikaSelvam]

Hi @sostenesgomes,

We achieved your requirement by using the SfRadialGauge widget and three RangePointer widgets, along with the axisLineStyle property. We customized the appearance of the axis line by adjusting its color and thickness to match your design specifications.

In addition, we used three RangePointer widgets. Two of these pointers were customized to have a border, while the third acted as the primary radial gauge, allowing to select values interactively.

For interaction, we set the onValueChanged callback to the third RangePointer. This allowed us to dynamically update the gauge value, adjust the appearance of the border, and update the annotation text as users interacted with the gauge.

Furthermore, we utilized the GaugeAnnotation property to customize the annotation text.

Screenshot:

We have shared a sample and output for your reference. You can modify the sample based on your needs.

Please let us know if you need any further assistance.

Regards,
Preethika Selvam.

bd565215.zip