We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies


The Radial Gauge widget for Flutter is a data visualization widget, written in Dart, that displays numerical values on a circular scale. It has a rich set of features such as axes, ranges, pointers, and annotations that are fully customizable and extendable. Use it to create speedometers, temperature monitors, dashboards, meter gauges, multiaxis clocks, watches, activity gauges, compasses, and more.

Radial Axis

The axis of the Flutter Radial Gauge widget is an easily customizable radial arc in which a set of values can be plotted based on business logic.

Radial gauge labels customization

Labels customization

Customize the look and feel of the default labels using the text style, size, and color properties. You can also add prefix or suffix text to the label.

Radial gauge ticks customization

Ticks customization

Define your own style for minor and major ticks with the help of the size, color, and thickness properties.

Setting offset to position radial gauge widget


To enhance readability, change the default axis position by setting the offset value for labels, ticks, and the axis line.

Axis customization support for radial gauge

Axis line

The axis line is used to add a radial border to a gauge. You can change the default axis line’s look to your own style.

Multiple axis support for radial gauge

Multiple axis

Add multiple axis to the gauge to design it like a clock, dashboard, speedometer, etc.

Direction support for radial gauge


Change the axis direction to clockwise or counterclockwise.

Custom axis in radial gauge

Custom axis

Custom axis allows to display the set of values along a linear or custom scale based on the design requirements.

Background image in radial gauge

Background image

The Background image allows you to set the background frame to a radial axis.

axis color customization in radial gauge

Color customization

Customize the default look and feel of an axis line’s appearance with the gradient color.

Gauge range

A range of the Flutter radial gauge is a visual element that helps you quickly visualize where a value falls on a radial axis.

Range label support for radial gauge

Range label

The range label is used to annotate the text in range to improve the readability.

Width customization of radial gauge ranges

Range width

The range width varies based on the values to enhance usage and readability.

Multiple ranges support in radial gauge

Multiple ranges

The Flutter Radial Gauge widget allows you to add multiple ranges inside the radial axis to indicate color variation.

Range grouping support in radial gauge

Range Grouping

You can combine multiple ranges as a single group using the text pointer.

Gradient range color in radial gauge

Gradient range color

Range of colors can gradually change based on the values to create a smooth color transition.

Gauge Pointer

Pointers contains a list of pointer elements, where you can add any number of gauge pointers such as needle pointer, range pointer and marker pointer inside the axis to indicate the value.

Needle pointer support in radial gauge

Needle pointer

Indicate a current value by using the highly customizable needle-type element.

Marker pointer support in radial gauge

Marker pointer

To highlight values, set the marker pointer type to a built-in shape, such as a triangle, inverted triangle, square, or diamond.

Image pointer support in radial gauge

Image pointer

To highlight values using text, set the marker pointer type to a built-in type as image.

Range pointer support in radial gauge

Range pointer

A range pointer is used to indicate the current value relative to the start value of a radial axis.

Pointer gradient support in radial gauge

Gradient pointer color

Range of colors can gradually change based on the values to create a smooth color transition.


Annotations display metadata about a Flutter Radial Gauge at specific points of interest in a plotting area.

Image annotations support for radial gauge

Image annotations

The annotations feature provides options to add any image over a gauge widget with respect to angle or axis value. You can add multiple images in a single widget.

Text annotations support in radial gauge

Text annotations

Add any text over the Radial Gauge widget to enhance its readability. You can also add multiple text instances in a single widget.

Pointer animation

The Flutter Radial Gauge widget provides a visually appealing way when the pointer moves from one value to another. Gauge supports various pointer animations.

Pointer animation support for radial gauge

Pointer interaction

The Flutter Radial Gauge widget provides an option to drag a pointer from one value to another. It is used to change the value at run time.

Pointer interaction support for circular gauge


Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile