Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (27)Blazor  (49)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (53)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (400)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (234)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (140)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (17)UI  (62)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (99)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin

Introducing Radial Gauge Widget in Flutter

We are happy to introduce our newest widget in the Flutter platform, the Radial Gauge. The beta version of the Syncfusion Flutter gauges package is available in pub.dev.

Radial Gauge Widget in Flutter
Radial Gauge Widget in Flutter

The Syncfusion Flutter gauges library includes a radial gauge, which is a data visualization widget written in Dart for creating modern, interactive, animated gauges for high-quality iOS and Android user interfaces. It allows users to create various application requirements, such as a speedometer, temperature monitor, dashboard, meter gauge, multiple-axis clock, gauge watch, modern activity gauge, or compass.

Let’s now briefly see the features of the Radial Gauge, and then I’ll walk you through the steps to add one to your application.

Flutter Radial Gauge features

The Syncfusion Flutter Radial Gauge has a rich set of features:

  • Axes
  • Ranges
  • Pointers
  • Annotations

These are fully customizable and extendable.

Axis

The radial gauge axis is a circular arc on which a set of values are displayed along a linear or custom scale based on the design requirements. You can add any number of axes inside the gauge. Axis features allow users to further customize the gauge axis element to make an axis more readable: label styles, tick styles, label rotation, custom scales, custom labels, inversed axis, outside axis position, and multiple axis support.Axis customization Radial Gauge Widget in Flutter

Range

The gauge range is a visual element that helps to quickly visualize where a value falls on an axis. You can add any number of ranges inside an axis. We can customize the start and end width of a range and annotate the text in it, to improve readability.Range customization in Radial Gauge Widget in Flutter

Pointers

Pointers are used to indicate values on an axis. The Radial Gauge control supports three types of pointers:

  • Needle pointer
  • Marker pointer
  • Range pointer

You can customize all these pointers as needed.

The needle pointer is used to indicate a value with a highly customizable needle-type element. One end of the needle is positioned at the middle of the gauge, and the other end points to the value of the axis. Use the knob and tail elements in the needle pointer to improve the look of the pointer.

The marker pointer is used to indicate a value with built-in shapes, such as a circle, diamond, triangle, inverted triangle, or rectangle. You can use text and images as a pointer.

The range pointer is used to indicate the value from the starting value of the axis. We can customize the pointer corner style to be a rounded curve.Pointer customization in Radial Gauge Widget in Flutter

Annotation

You can add multiple widgets, such as text and images as annotations, at specific points of interest in the Radial Gauge.Annotation in Radial Gauge Widget in Flutter

Pointer animation

You can animate the pointer in a visually appealing way when the pointer moves from one value to another. Our Radial Gauge supports various pointer animations.

Bounds out pointer animation - Radial Gauge widget in Flutter
Bounds out pointer animation – Radial Gauge widget in Flutter
Ease out pointer animation - Radial Gauge widget in Flutter
Ease out pointer animation – Radial Gauge widget in Flutter
Slow middle pointer animation - Radial Gauge widget in Flutter
Slow middle pointer animation – Radial Gauge widget in Flutter

Pointer interaction

Radial Gauge provides an option to drag a pointer from one value to another. Use it to change the value at run time.

Dragging pointer in Radial Gauge Widget for Flutter
Dragging pointer in Radial Gauge Widget for Flutter

Add a Flutter radial gauge to your app

This section explains how to create a simple radial gauge to demonstrates basic gauge usage.

Add dependency

Add the Syncfusion Flutter Gauge dependency to your pub spec file.

dependencies:

syncfusion_flutter_gauges: ^1.0.0-beta

Get packages

Run the following command to get the required packages.

$ flutter pub get

Import package

Import the following package in your Dart code.

import 'package:syncfusion_flutter_gauges/gauges.dart';

Add a radial gauge to the widget tree

After importing the package, initialize SfRadialGauge as a child of any widget, such as a container widget.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      body: Center(
        child: Container(
          child: SfRadialGauge()
          )),
    ));
  }

Add radial gauge elements

Add gauge elements: ranges to display different color ranges; a pointer to indicate the current value, and an annotation to show the current value.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      body: Center(
        child: Container(
          child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(minimum: 0, maximum: 150,
            ranges: <GaugeRange>[
              GaugeRange(startValue: 0, endValue: 50, color:Colors.green),
              GaugeRange(startValue: 50,endValue: 100,color: Colors.orange),
              GaugeRange(startValue: 100,endValue: 150,color: Colors.red)],
            pointers: <GaugePointer>[
              NeedlePointer(value: 90)],
            annotations: <GaugeAnnotation>[
              GaugeAnnotation(widget: Container(child: 
                 Text('90.0',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
                 angle: 90, positionFactor: 0.5
              )]
          )])
      ))),
    );
  }

The following screenshot illustrates the result of the previous code sample.Radial Gauge in Flutter

Explore Flutter gauge examples and demos

If you want an in-depth learning experience on how to create a complete Flutter app, be sure to read Flutter Succinctly by Ed Freitas. It’s part of Syncfusion’s library of free technical ebooks.

Conclusion

In this blog post, we walked through our new Syncfusion Flutter Radial Gauge and its features. Try them and share your feedback in the comments section. To get started, you can refer to this video tutorial.

Also, if you need a new widget in the Flutter framework, please let us know in the comments section. As always, we are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (5)

[…] Introducing Radial Gauge Widget in Flutter (Sheik Syed) […]

Hi,

I want to use this widget, the radial gauge, in our production app. Do I need to get the entire syncfusion paid license for that? Is there a custom one time payment option available for just this widget? Would be a great help. Thanks!

Hi Jagrati,

We are glad that you are interested in buying our Flutter widgets. You can check the pricing of our Flutter widgets in here.

https://www.syncfusion.com/sales/products/flutter

For more details please contact our sales team (sales@syncfusion.com)

Thanks,
Suresh

How do I adjust the size of the radialguage inside of a container?

Hi Alfie,

There is no direct property for the radial gauge to adjust its size. You can place the radial gauge inside the layout widgets such as SizedBox or Padding widget and adjust its size as in the code below.

Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: SizedBox(
height: 300,
width: 300,
child: SfRadialGauge(),
)
)),
));
}

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top