Implementing Flutter Gauge

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

Explanation:

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.