Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (46)ASP.NET  (48)ASP.NET Core  (61)ASP.NET MVC  (84)Azure  (28)Blazor  (84)DocIO  (19)Essential JS 2  (68)Essential Studio  (162)Flutter  (99)JavaScript  (146)Microsoft  (101)PDF  (57)React  (32)Succinctly series  (120)Syncfusion  (464)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (21)Windows Forms  (54)WPF  (113)Xamarin  (124)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (48)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (41)Development  (248)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (19)Extensions  (12)File Manager  (4)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (207)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (5)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (23)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (16)Solution Services  (2)Spreadsheet  (7)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (54)UI  (113)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (190)What's new  (120)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 the New Flutter Linear Gauge Widget

Introducing the New Flutter Linear Gauge Widget

We at Syncfusion are very happy to announce the availability of the new Flutter Linear Gauge widget in the 2021 Volume 1 release. The Flutter Linear Gauge is a vivid data visualization widget that displays data on a linear scale in either horizontal or vertical orientation.

Key features

The key features of the Flutter Linear Gauge widget are:

  1. Set a gauge’s orientation either as vertical or horizontal.
  2. Easily customize all gauge elements.
  3. Mirror the complete widget with just a single property.
  4. Create most common tools like a thermometer or height calculator with minimal lines of code.
  5. Apply smooth animations during interactions.
  6. Swipe and drag gestures are possible with pointers.

Widget anatomy

The new Flutter Linear Gauge widget comes with the following easily customizable elements:

  1. Axis track
  2. Ticks and Labels
  3. Ranges
  4. Bar pointer
  5. Shape marker pointer
  6. Widget marker pointer

Axis track

The Linear Gauge axis is a scale where a set of values are plotted.  We can customize its thickness, color, and edge styles. You can also inverse or extend the axis. Its color can be either solid or a linear gradient. The edges can be customized to have rounded corners or flat. You can also set one corner to be rounded and the others to be flat.

Axis Track in Flutter Linear Gauge
Axis Track in Flutter Linear Gauge

Ticks and labels

We can easily customize the Linear Gauge axis elements, such as labels and major and minor ticks, to different styles. The Linear Gauge provides multiple text customization options for its labels. You can also customize:

  • Interval between the labels.
  • The number of minor ticks between each pair of major ticks.
  • The position of ticks and labels.
Ticks and Labels in Flutter Linear Gauge
Ticks and Labels in Flutter Linear Gauge

Ranges

A range is a visual element that helps you quickly visualize where the values fall on an axis track. It will denote the selected rage of values using start and end points in an axis track . We can add multiple ranges with different styles to a Linear Gauge. You can customize the representation of ranges with different shapes like concave and convex. Also, with these options you can decide whether the range should be flat or curved. You can customize the range color with shaders (linear, radial and sweep gradient).

Ranges in Flutter Linear Gauge
Ranges in Flutter Linear Gauge

Pointers

A pointer helps us indicate a specific value on an axis. The Linear Gauge widget supports three types of pointers:

  • Shape
  • Widget
  • Bar

The shape and widget pointers are collectively called Marker Pointers.  All the three pointer types are completely customizable. You can also add multiple pointers to a single linear gauge.

Pointers in Flutter Linear Gauge
Pointers in Flutter Linear Gauge

Bar pointer

A bar pointer is an accenting line or shaded background that can be placed on a linear gauge to mark the current value in the axis track. The bar pointers always start from the minimum value of the axis and end on the specified value. In Linear Gauge, we can customize the bar pointer’s thickness, color, corner styles and the position of the bar.

Bar Pointer in Flutter Linear Gauge
Bar Pointer in Flutter Linear Gauge

Marker pointer

Marker pointers are used to indicate specific values on the axis. The two types of marker pointers supported by Flutter Linear Gauge are shape and widget.

Shape marker pointer

The shape marker pointer has predefined shapes:

  • Triangle
  • Inverted Triangle
  • Circle
  • Diamond
  • Rectangle

We can easily customize the size, position, and color of the shape pointer.

Shape Marker Pointer in Flutter Linear Gauge
Shape Marker Pointer in Flutter Linear Gauge

Widget marker pointer

If the predefined shapes in the shape marker don’t suite your needs, then you can use the widget marker pointer. It allows you to use any kind of Flutter widget as a marker pointer, complete with that widget’s full set of customization options.

Widget Marker Pointer in Flutter Linear Gauge
Widget Marker Pointer in Flutter Linear Gauge

Mirror linear gauge

All the Linear Gauge elements can be mirrored by just setting the isMirrored property.  The transformation will be smooth.

Mirror Linear Gauge
Mirror Linear Gauge

Animation

We can separately animate all Linear Gauge elements: axis, ticks, labels, ranges, bar pointers, and shape and widget marker pointers. The following are a few examples of animated pointers.

Animating Bar Pointers in Flutter Linear Gauge

Animating Bar Pointers in Flutter Linear Gauge
Animating Bar Pointers in Flutter Linear Gauge

Animating Shape Marker Pointers in Flutter Linear Gauge

Animating Shape Marker Pointers in Flutter Linear Gauge
Animating Shape Marker Pointers in Flutter Linear Gauge

Interaction

You can move the shape and widget marker pointers in the Flutter Linear Gauge from one value to another with responsive swipe or drag gestures.

Interacting with Pointers in Flutter Linear Gauge
Interacting with Pointers in Flutter Linear Gauge

Now, we know everything about the features of new Flutter Linear Gauge widget. Let’s see how easy it is to add the widget in your application.

Add Linear Gauge to the widget tree

Refer the following code to add the Flutter Linear Gauge to your application’s widget tree.

@override
Widget build(BuildContext context) {
   return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfLinearGauge(),
        ),
      ),
   );
}
Flutter Linear Gauge
Flutter Linear Gauge

Add Linear Gauge elements

Use the following code to add a range, bar pointer and shape pointer with their default styles to the Flutter Linear Gauge widget.

@override
Widget build(BuildContext context) {
   return MaterialApp(
      color: Colors.white,
      home: Scaffold(
        body: Center(
          // Add a Linear Gauge to the widget tree.
          child: SfLinearGauge(
            //Add a new range. 
            ranges: [
              LinearGaugeRange(endValue:100),
            ],
            //Add a new bar pointer.
            barPointers: [
              LinearBarPointer(value: 50),
            ],
            //Add a new shape pointer.
            markerPointers: [
              LinearShapePointer(value: 70),
            ],
          ),
        ),
      ),
   );
}

The previous code will produce a linear gauge like this.

Customizing Flutter Linear Gauge elements
Customizing Flutter Linear Gauge elements

The range with values 0 to 100 is drawn in red, a bar with a value 50 is drawn in blue, and finally the shape pointer is drawn at the value 70. Now you understand the default element styles of  our new Flutter Linear Gauge widget. Easy, isn’t it?

Happy coding!!

References

To know more about customization in our Flutter Linear Gauge, please check out our user documentation and live demo.

Conclusion

Thanks for reading! In this blog post, we have seen the stunning features of the new Flutter Linear Gauge widget and how to add it to your application. This widget is available in our 2021 Volume 1 release.

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

Syncfusion offers flexible Flutter widgets to create high-quality apps for Android, iOS, and the web. The number of widgets available is increasing in every release and we are making every effort to ensure their stability. Don’t miss our demo app in Google Play and the App Store and check our Flutter project demos.

If you need a new Flutter widget, you can contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

If you liked this blog post, we think you’ll also like the following articles too:

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top