Implementing Flutter Gauge - GeeksforGeeks

15 Feb, 2021
Flutter gauge is an information perception widget written in dart language to make a modern, interactive, and animated gauge check and is utilized to make excellent portable application user interfaces utilizing Flutter. There is an alternate style of gauge in flutter.
Following are the steps to follow in order to implement the Flutter Gauge in the Flutter app:
Step 1: Add the following dependencies to pubspec.yaml file.
dependencies:
flutter_gauge: ^1.0.8


Step 2: Import the following packages
import 'package:flutter_gauge/flutter_gauge.dart';


Step 3: Run flutter packages in the root directory of your app.
Step 4: Next, enable AndriodX by adding the following to your grade.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true


Step 5: Now, the following code needs to be implemented in the respective dart file
Dart
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("GeeksforGeeks"),        backgroundColor: Color(0xFF4CAF50),        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,                    ),                ),              ],           ),        );    }}
Output:
Flutter Gauge demo
Following is the explanation of the types of flutter gauge implemented in the above dart code. 
Dart
FlutterGauge(    handSize: 25,index: 40.0,    end: 100,number:    Number.endAndCenterAndStart,    circleColor: Color(0xFF47505F),    secondsMarker:    SecondsMarker.secondsAndMinute,    counterStyle: TextStyle(    color: Colors.black,fontSize: 20,  )),
Output:
Flutter Gauge Type 1
In this above flutter gauge, we have set the index at 40. We have also set the handSize at 25 as well as the number as endAndCenterAndStart starting with 0 and ending with 100. The secondsMarker used in this flutter gauge is the second and minute functions. We have also set the circle color but the default color is blue.
Dart
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  )),
Output:
Flutter Gauge Type 2
In this above flutter gauge, we have set the index at 66. The hand is set as short. The number and the second’s marker is set as none. We have also set the circle color but the default color is blue. We have set the decimal value as false and the counter alignment in the center.
Dart
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,  )),
Output:
Flutter Gauge Type 3
In this above flutter gauge, we have set the index at 70. We have also set the handSize at 25 as well as the number as endAndCenterAndStart starting with 0 and ending with 100. The secondsMarker used in this flutter gauge is the second and minute function and the hand is set as short. We have also set the circle color but the default color is blue.
Dart
FlutterGauge(  handSize: 25, index: 100.0, end: 500,  number: Number.endAndStart,  secondsMarker: SecondsMarker.minutes,  isCircle: false,  counterStyle: textStyle(    color: Colors.black, fontSize: 20,    )  )
Output:
Flutter Gauge Type 4
In this above flutter gauge, we have set the index at 100. We have also set the handSize at 25 as well as the number as endandStart starting with 0 and ending with 500. The secondsMarker used in this flutter gauge is the minute function and the hand is set as short. We have also set the circle as false.
Dart
FlutterGauge(  index: 50,width:280,  counterStyle : TextStyle(color: Colors.black,  fontSize: 22,),  secondsMarker: SecondsMarker.secondsAndMinute,  number: Number.all,   numberInAndOut: NumberInAndOut.outside,),
Output:
Flutter Gauge Type 5
In this above flutter gauge, we have set the index at 50. We have also set the width at 280 and the number as all. The secondsMarker used in this flutter gauge is a minute function and the number is shown InAndOut outside. We have also set the circle color but the default color is blue.
android
Flutter
Flutter UI-components
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Flexbox-Layout in Android
How to Post Data to API using Retrofit in Android?
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar