How to Create a Rounded Flutter Radial Gauge with Text Annotations?

In this article, we described how to create a rounded Flutter Radial Gauge widget with interactive needle and text annotations. We can achieve this by using the RadialAxis, RangePointer, and NeedlePointer in the SfRadialGauge. You can display ranges by setting the value of the RangePointer, display the needle by using the NeedlePointer, and show text at specific locations by setting the value of the WidgetPointer.

Let’s walk through the step-by-step process to create a rounded radial gauge with an interactive needle and text annotations.

Step 1: Initialize the radial gauge widget and add a radial axis.

@override
Widget build(BuildContext context) {
return SfRadialGauge(
  axes: <RadialAxis>[
    RadialAxis(),
    ],
  );
}

Step 2: Customizing the radial gauge widget with RadialAxis

The RadialAxis is used to define and customize the overall appearance and behavior of the gauge axis. This class contains the startAngle and endAngle, minimum and maximum values, and the axisLineStyle properties.

The RadialAxis provides several properties that can be adjusted to customize the gauge axis:

• startAngle: Specifies the start angle of the gauge, it is allowing you to set where the gauge begins on the circular scale.
• endAngle: Specifies the end angle of the gauge, it is allowing you to set where the gauge ends on the circular scale.
• canScaleToFit: A boolean property that indicates whether the gauge can scale to fit the available space.
• minimum: Specifies the minimum value of the gauge.
• maximum: Specifies the maximum value of the gauge.
• showLabels: A boolean property that determines whether to display labels on the axis or not.
• showTicks: A boolean property that determines whether to display ticks on the axis or not.
• axisLineStyle: This property allows customization of the axis line, including its style, thickness, and color.

RadialAxis(
startAngle: 180,
endAngle: 360,
canScaleToFit: true,
minimum: 0,
maximum: 8000,
showLabels: false,
showTicks: false,
axisLineStyle: const AxisLineStyle(
cornerStyle: CornerStyle.bothCurve,
thickness: 100,
color: Color.fromARGB(255, 119, 168, 252),
),
...
)

Step 3: Creating a color-filled range pointer

The RangePointer has been added to indicate a filled range within the gauge. In this case, it is set to a fixed value of 2500, creating a color-filled region along the axis that enhances the visual representation of the gauge.

pointers: <GaugePointer>[
RangePointer(
value: 2500,
cornerStyle: CornerStyle.bothCurve,
width: 100,
color: Colors.blue.shade900,
),
...
]

Step 4: Setting the initial needle value

The needle value is initialized to store the current position, starting at 4000. It is updated through the _updateNeedleValue function, which adjusts the value and refreshes the user interface to reflect the changes while dynamically updates the needle.

• _needleValue: This variable is initialized to store the current needle position.
• _updateNeedleValue: This function updates _needleValue and refreshes the user interface.

double _needleValue = 4000;

void _updateNeedleValue(double value) {
setState(() {
_needleValue = double.parse(value.toStringAsFixed(2));
 });
}

Step 5: Customizing and controlling the needle pointer interaction

The NeedlePointer is the primary interactive component of the gauge. It utilizes the value from _needleValue and enables users to drag the needle. The needle’s appearance, including width, color, and knob style, is customizable.

The onValueChanged callback updates the needle’s value using the _updateNeedleValue function, while the onValueChanging callback ensures that the needle’s value remains within a defined range (between 1000 and 7000) by canceling any changes that exceed this range.

NeedlePointer(
value: _needleValue,
needleStartWidth: 2,
needleEndWidth: 15,
needleLength: 0.7,
needleColor: Colors.black,
knobStyle: const KnobStyle(
color: Colors.black,
),
enableDragging: true,
onValueChanged: _updateNeedleValue,
onValueChanging: (ValueChangingArgs args) {
if (args.value < 1000 || args.value > 7000) {
args.cancel = true;
   },
  },
),

Step 6: Customizing the gauge labels

Custom labels (0, 2000, 6000, 8000) are added at specific points on the gauge using WidgetPointer. These labels are positioned relative to the axis with an offset of -55 or -75 logical pixels. They are styled with bold, large text to enhance readability and are positioned dynamically according to their respective values.

WidgetPointer _buildWidgetPointer(double value, double offset, String text) {
    return WidgetPointer((
      value: value,
      offsetUnit: GaugeSizeUnit.logicalPixel,
      offset: offset,
      child: Text(
        text,
        style: const TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18,
        ),
      ),
    );
  }
...
_buildWidgetPointer(0, -55, '0'),
_buildWidgetPointer(2000, -75, '2000'),
_buildWidgetPointer(6000, -75, '6000'),
_buildWidgetPointer(8000, -55, '8000'),
...

By following these steps and using the provided code snippet, you can create a rounded SfRadialGauge widget with an interactive needle and text annotations.

View sample on GitHub

Conclusion

I hope you enjoyed learning how to create a rounded Flutter Radial Gauge with text annotations.

You can refer to our Flutter Radial Gauge feature tour page to learn about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!