Explore Flutter Gauge In Flutter Apps
Dart and Flutter are extraordinary for building high-performance UIs that render perfectly over a wide range of devices and structure factors. In the first place, you’ll need the essential information on Flutter, Git, and GitHub. If you don’t, as of now, have Flutter, get a copy of it for your OS from their install page.
Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time.
Install
Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.flutter.dev
In this article, we will Explore Flutter Gauge In Flutter Apps. We will also implement a demo of the flutter gauge using the flutter_gauge package in your flutter applications.
flutter_gauge | Flutter Package
You should ensure that you add the following dependency in your Flutter project. dependencies: flutter_gauge: ^1.0.8…pub.dev
Table Of Contents::
Flutter Gauge
Flutter gauge is an information perception widget written in the dart to make a modern, interactive, and animated gauge check utilized to make excellent portable application UIs utilizing Flutter. There was an alternate style of gauge in a flutter.
Demo module ::
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter_gauge: ^latest version
Step 2: Import
import 'package:flutter_gauge/flutter_gauge.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called flutter_gauge_page.dart inside the lib folder.
In this flutter gauge, we will set the index at 40, handSize was 25, the number was endAndCenterAndStart starting with 0 and end with 100, secondsMarker was second and minute function. We will also set the circle color, but the default color was blue.
FlutterGauge(
handSize: 25,index: 40.0,
end: 100,number:
Number.endAndCenterAndStart,
circleColor: Color(0xFF47505F),
secondsMarker:
SecondsMarker.secondsAndMinute,
counterStyle: TextStyle(
color: Colors.black,fontSize: 20,
)
),
In this flutter gauge, we will set the index at 66, and the hand was short; the number is none; the second’s marker was also none. We will also set the circle color, but the default color was blue. We will false the decimal value and set counter alignment in the center.
In this flutter gauge, we will set the index at 70, handSize was 25, the number was endAndCenterAndStart starting with 0 and end with 100, secondsMarker was second and minute function, the hand was short. We will also set the circle color, but the default color was blue.
FlutterGauge(
handSize: 25,index: 70.0,end: 100,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute,
hand: Hand.short,
circleColor: Color(0xFF59EA50),
counterStyle: TextStyle(color: Colors.black,
fontSize: 20,
)
),
In this flutter gauge, we will set the index at 100, handSize was 25, the number was endandStart starting with 0 and end with 500, secondsMarker was minute function, the hand was short. We will see the circle was false.
In this flutter gauge, we will set the index at 50, the width was 280, the number was all, secondsMarker was minute function, and the number was shown InAndOut outside. We will also set the circle color, but the default color was blue.
FlutterGauge(
index: 50,width:280,
counterStyle : TextStyle(color: Colors.black,
fontSize: 22,),
secondsMarker: SecondsMarker.secondsAndMinute,
number: Number.all,
numberInAndOut: NumberInAndOut.outside,
),
In this flutter gauge, we will set the index at 80, the width was 300, the number was all, secondsMarker was none, and the width Circle was 10. We will also set the circle color, but the default color was blue.
Code File
import 'package:flutter/material.dart';
import 'package:flutter_gauge/flutter_gauge.dart';
class FlutterGaugePage extends StatefulWidget {
@override
_FlutterGaugePageState createState() => _FlutterGaugePageState();
}
class _FlutterGaugePageState extends State<FlutterGaugePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Flutter Gauge Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Center(
child: FlutterGauge(
handSize: 25,index: 40.0,
end: 100,number:
Number.endAndCenterAndStart,
circleColor: Color(0xFF47505F),
secondsMarker:
SecondsMarker.secondsAndMinute,
counterStyle: TextStyle(
color: Colors.black,fontSize: 20,)
),
)
),
Expanded(
child: FlutterGauge(
secondsMarker: SecondsMarker.none,
hand: Hand.short, number: Number.none,
index: 66.0,circleColor: Color(0xFF9DC1DC),
counterStyle: TextStyle(color: Colors.black,
fontSize: 25
),
counterAlign: CounterAlign.center,
isDecimal: false
)),
],
),
Row(
children: <Widget>[
Expanded(
child: FlutterGauge(
handSize: 25,index: 70.0,end: 100,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute
,hand: Hand.short,
circleColor: Color(0xFF59EA50),
counterStyle: TextStyle(color:
Colors.black,fontSize: 20,)
),
),
Expanded(
child: FlutterGauge(
handSize: 25,index: 100.0,end: 500,
number: Number.endAndStart,
secondsMarker: SecondsMarker.minutes,
isCircle: false,
counterStyle: TextStyle(color:
Colors.black,fontSize: 20,)
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: FlutterGauge(
index: 50,width:280,counterStyle : TextStyle
(color: Colors.black,fontSize: 22,),
secondsMarker: SecondsMarker.secondsAndMinute,
number: Number.all, numberInAndOut:
NumberInAndOut.outside,
),
),
],
),
FlutterGauge(
index: 80.0,width: 300,counterStyle
:TextStyle(color: Colors.black,fontSize: 22,),
circleColor: Color(0xFFFF4753),
widthCircle: 10,secondsMarker:
SecondsMarker.none,
number: Number.all
),
],
),
),
);
}
}
Conclusion :
In the article, I have explained the basic introduction of Flutter Gauge; you can modify this code according to your choice. This was a small introduction to Flutter Gauge from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Flutter Gauge in your flutter projects. This demo program shows how to create a flutter gauge in a flutter and show how to flutter gauge will work 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.
Find the source code of the Flutter Gauge Demo:
flutter-devs/flutter_gauge_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
