Skip to content
Related Articles

Related Articles

Improve Article

Implementing Flutter Gauge

  • Difficulty Level : Expert
  • Last Updated : 15 Feb, 2021
Geek Week

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

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

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

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

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

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

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.

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :