Flutter – Radial Gauge

A radial gauge is a graphical representation of a measurement that displays values on a circular scale. It is a type of gauge that is often used to visualize data such as speed, temperature, or progress in a circular format. Radial gauges are commonly used in dashboards, control panels, and other applications where a concise and visually appealing representation of data is required. In Flutter we have a package syncfusion_flutter_gauges package that helps to implement Radial Gauge easily. In this article, we are using the syncfusion_flutter_gauges package to implement Radial Gauge in Flutter Application. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the Required Dependency

Add the below dependency to your pubspec.yaml file.

dependencies:
  syncfusion_flutter_gauges: ^23.2.4

Or, Simply you can run the below command in your VS Code Terminal.

flutter pub add syncfusion_flutter_gauges

Step 3: Import the Package

First of all import material.dart and syncfusion_flutter_gauges package.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: RadialGaugeWidget(),
    );
  }
}

Step 6: Create RadialGaugeWidget Class

In this class we are going to Implement the SfRadialGauge widget that help to create a Radial Gauge .

• The RadialAxis widget defines the scale of the gauge, including the range of values, color ranges, needle pointers, and annotations.
• GaugeRange widgets define colored ranges on the gauge to represent different zones or thresholds.
• The NeedlePointer widget represents a needle or pointer that points to the current value on the circular scale.
• GaugeAnnotation widgets allow the addition of text or shapes to provide additional information on the gauge.
• The onAxisTapped callback is used to handle tap events on the gauge. When the gauge is tapped, this callback is triggered, and the _pointerValue is updated with the tapped value.

Comments are added for better understanding.

 SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(
              // Define the range of values for the gauge
              minimum: 0,
              maximum: 100,
              ranges: <GaugeRange>[
                // Define the first range with a green color
                GaugeRange(
                  startValue: 0,
                  endValue: 50,
                  color: Colors.green,
                  startWidth: 10,
                  endWidth: 10,
                ),
                // Define the second range with an orange color
                GaugeRange(
                  startValue: 50,
                  endValue: 100,
                  color: Colors.orange,
                  startWidth: 10,
                  endWidth: 10,
                ),
              ],
              // Add a needle pointer to indicate the current value
              pointers: <GaugePointer>[
                NeedlePointer(
                  value: _pointerValue,
                  enableAnimation: true,
                ),
              ],
              // Add an annotation to display the current value as text
              annotations: <GaugeAnnotation>[
                GaugeAnnotation(
                  widget: Text(
                    '${_pointerValue.toStringAsFixed(2)}%', // Display the percentage value with 2 decimal places
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                  ),
                  angle: 90,
                  positionFactor: 0.5,
                ),
              ],
              // Handle the tap event on the gauge to update the value
              onAxisTapped: (double value) {
                setState(() {
                  _pointerValue = value;
                });
              },
            ),
          ],
        ),

Dart

class RadialGaugeWidget extends StatefulWidget {
  @override
  _RadialGaugeWidgetState createState() => _RadialGaugeWidgetState();
}

class _RadialGaugeWidgetState extends State<RadialGaugeWidget> {
  // Variable to hold the
  // current value of the pointer
  double _pointerValue = 75;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radial Gauge Example'),
      ),
      body: Center(
        child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(
              // Define the range of
              // values for the gauge
              minimum: 0,
              maximum: 100,
              ranges: <GaugeRange>[
                // Define the first
                // range with a green color
                GaugeRange(
                  startValue: 0,
                  endValue: 50,
                  color: Colors.green,
                  startWidth: 10,
                  endWidth: 10,
                ),
                // Define the second range
                // with an orange color
                GaugeRange(
                  startValue: 50,
                  endValue: 100,
                  color: Colors.orange,
                  startWidth: 10,
                  endWidth: 10,
                ),
              ],
              // Add a needle pointer to
              // indicate the current value
              pointers: <GaugePointer>[
                NeedlePointer(
                  value: _pointerValue,
                  enableAnimation: true,
                ),
              ],
              // Add an annotation to display
              // the current value as text
              annotations: <GaugeAnnotation>[
                GaugeAnnotation(
                  widget: Text(
                    '${_pointerValue.toStringAsFixed(2)}%', // Display the percentage value with 2 decimal places
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                  ),
                  angle: 90,
                  positionFactor: 0.5,
                ),
              ],
              // Handle the tap event on the
              // gauge to update the value
              onAxisTapped: (double value) {
                setState(() {
                  _pointerValue = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: RadialGaugeWidget(),
    );
  }
}

class RadialGaugeWidget extends StatefulWidget {
  @override
  _RadialGaugeWidgetState createState() => _RadialGaugeWidgetState();
}

class _RadialGaugeWidgetState extends State<RadialGaugeWidget> {
  // Variable to hold the current value of the pointer
  double _pointerValue = 75;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radial Gauge Example'),
      ),
      body: Center(
        child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(
              // Define the range of values for the gauge
              minimum: 0,
              maximum: 100,
              ranges: <GaugeRange>[
                // Define the first range with a green color
                GaugeRange(
                  startValue: 0,
                  endValue: 50,
                  color: Colors.green,
                  startWidth: 10,
                  endWidth: 10,
                ),
                // Define the second range with an orange color
                GaugeRange(
                  startValue: 50,
                  endValue: 100,
                  color: Colors.orange,
                  startWidth: 10,
                  endWidth: 10,
                ),
              ],
              // Add a needle pointer to indicate the current value
              pointers: <GaugePointer>[
                NeedlePointer(
                  value: _pointerValue,
                  enableAnimation: true,
                ),
              ],
              // Add an annotation to display the current value as text
              annotations: <GaugeAnnotation>[
                GaugeAnnotation(
                  widget: Text(
                    '${_pointerValue.toStringAsFixed(2)}%', // Display the percentage value with 2 decimal places
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                  ),
                  angle: 90,
                  positionFactor: 0.5,
                ),
              ],
              // Handle the tap event on the gauge to update the value
              onAxisTapped: (double value) {
                setState(() {
                  _pointerValue = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

Output: