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; }); }, ), ], ), ), ); } } |