The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.
In this article, we will explore the Linear Gauge in flutter using the linear_gauge_package. With the help of the package, we can easily achieve a flutter linear gauge. So let’s get started.
syncfusion_flutter_gauges | Flutter Package
The Flutter Gauges library includes the data visualization widgets Linear Gauge and Radial Gauge (a.k.a. circular…pub. dev
Table Of Contents :
Linear Gauge Widget :
The Flutter Linear Gauge is a data visualization widget that is used to display data on a linear scale. We can show the data vertically or vertically. In this, we have a rich of features in the form of axes, range, pointers, and animations. With this gauge, it is very easy to simulate a thermometer, progress bar, water tracker, etc.
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:syncfusion_flutter_gauges: ^19.1.56
Step 2: Importing
import 'package:syncfusion_flutter_gauges/gauges.dart';Step 3: Run flutter package get
Code Implementation :
Create a new dart file called linear_gauge_home_page.dart inside the lib folder.
First of all, we have created a home page screen in which five buttons have been created and at the click of each button, a new page will open in which we have shown the linear gauge in different ways. Let us understand this in detail.
Axis track:
The flutter linear gauge axis is a scale where a group of values is plotted. We have used the gauge axis in this screen in which we have used the inside of the axisTrackStyle property inside the SfLinearGauge. Has taken the color of the linear-gradient type and has given its thickness value of 10. Let us understand this through a reference.
SfLinearGauge(
isAxisInversed:true,
axisTrackStyle: LinearAxisTrackStyle(
thickness: 10,
gradient: LinearGradient(
colors: [Colors.red, Colors.orange],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
stops: [0.4, 0.9],
tileMode: TileMode.clamp
)
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Ticks and label:
The flutter linear gauge can easily customize the label and ticks of the axis elements. As we have done in this screen, we have first taken a column in this screen, which describes the label and tick gauge, first of all in the tick gauge. The position of the ticks is displayed, the color of the ticks, etc., and the position label color size of the label is displayed in the label gauge. Let us understand this through a reference.
SfLinearGauge(
tickPosition: LinearElementPosition.outside,
labelPosition: LinearLabelPosition.outside,
majorTickStyle: LinearTickStyle(length: 10, thickness: 2.5, color: Colors.orange),
minorTickStyle: LinearTickStyle(length: 5, thickness: 1.75, color: Colors.red)),
SfLinearGauge(
tickPosition: LinearElementPosition.inside,
labelPosition: LinearLabelPosition.inside,
axisLabelStyle: TextStyle(
color: Colors.red,
fontSize: 15,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
fontFamily: 'Times'),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Ranges:
The flutter linear gauge range is a visual element that tells us the value axis tracking. For a linear gauge, we can add multiple ranges with different styles. As we have used the range in this screen in which three different ranges have been taken, whose color and start and end values have been given separately.
LinearGaugeRange(
startValue: 0,
endValue: 33,
position: LinearElementPosition.outside,
color: Color(0xffF45656)),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Widget marker pointer:
Widget Marker Pointer We can use it as a marker in any type of flutter widget. As in this screen, we have used the marker pointer linear widget pointer inside which we have created a custom marker and given the value of value.
markerPointers: [
LinearWidgetPointer(
value:_pointerValue,
onValueChanged: (value) => {
setState(() => {_pointerValue = value})
},
child: Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Colors.blueAccent)
),
),
],
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_linear_gauage_demo/route/route_names.dart';
import 'package:flutter_linear_gauage_demo/widget/custom_button.dart';
class LinearGauageHomePage extends StatefulWidget {
@override
_LinearGauageHomePageState createState() => _LinearGauageHomePageState();
}
class _LinearGauageHomePageState extends State<LinearGauageHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Linear Gauge Widget Demo'),
centerTitle: true,
),
body: Container(
margin: EdgeInsets.only(left: 15, right: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomButton(
mainButtonText: 'Axis track',
callbackTertiary: () {
Navigator.of(context).pushNamed(RouteName.AxisTrackGuage);
},
color: Colors.green[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Ticks and Labels',
callbackTertiary: () {
Navigator.of(context).pushNamed(RouteName.TicksLabelGuage);
},
color: Colors.blue[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Ranges',
callbackTertiary: () {
Navigator.of(context).pushNamed(RouteName.RangesGuage);
},
color: Colors.orange[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Shape marker pointer',
callbackTertiary: () {
Navigator.of(context).pushNamed(RouteName.ShapeMarkerPointer);
},
color: Colors.teal[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Widget marker pointer',
callbackTertiary: () {
Navigator.of(context).pushNamed(RouteName.WidgetMarkerPointer);
},
color: Colors.green[200],
),
],
),
),
);
}
}
Conclusion:
In this article, I have explained a Linear Gauge Widget in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Linear Gauge Widget from our side.
I hope this blog will provide you with sufficient information in Trying up the Linear Gauge Widget in your flutter project. We will show you the Linear Gauge Widget is?, and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
