Getting started with Flutter Radial Gauge (SfRadialGauge)

23 Apr 202112 minutes to read

This section explains the steps required to add the radial gauge and its elements such as title, axis, range, pointer and annotation. This section covers only basic features needed to know to get started with Syncfusion radial gauge.

To get start quickly with our Flutter radial gauge widget, you can check on this video.

Add Flutter Radial Gauge to an application

Create a simple project using the instructions given in the Getting Started with your first Flutter app documentation.

Add dependency

Add the Syncfusion Flutter Gauge dependency to your pubspec.yaml file.

  • dart
  • dependencies:
    
        syncfusion_flutter_gauges: ^xx.x.xx

    NOTE

    Here xx.x.xx denotes the current version of Syncfusion Flutter Gauge package.

    Get packages

    Run the following command to get the required packages.

  • dart
  • $ flutter pub get

    Import package

    Import the following package in your Dart code.

  • dart
  • import 'package:syncfusion_flutter_gauges/gauges.dart';

    Initialize the radial gauge

    After the package has been imported, initialize the SfRadialGauge as a child of any widget such as container widget.

  • dart
  • @override
        Widget build(BuildContext context) {
            return MaterialApp(
                home: Scaffold(
                    body: Center(
                        child: Container(
                            child:SfRadialGauge()
                            )
                        )
                    )      
                );
            }

    Initialize radial gauge

    Add title

    You can add a title to the radial gauge to provide information to users about the designed gauge. The title can be set to gauge as demonstrated in following code snippet.

  • dart
  • @override
        Widget build(BuildContext context) {
            return MaterialApp(
                home: Scaffold(
                    body: Center(
                        child: Container(
                            child: SfRadialGauge(
                                title:GaugeTitle(text: 'Speedometer', textStyle: TextStyle(
                                fontSize: 20.0,fontWeight: FontWeight.bold))
                            )
                        )
                    )
                )      
            );
        }

    title to radial gauge

    Add axis

    Axes contain a list of axis elements, where you can add any number of radial axes inside the gauge. You can specify the minimum and maximum values of axis using the minimum and maximum properties as demonstrated in the following code snippet.

  • dart
  • @override
        Widget build(BuildContext context) {
            return MaterialApp(
                home: Scaffold(
                    body: Center(
                        child: Container(
                        child: SfRadialGauge(
                            axes: <RadialAxis>[
                                RadialAxis(minimum: 0, maximum: 150)]
                            )
                        )
                    )
                )      
            );
        }

    Axis to radial gauge

    Add range

    Ranges contain a list of range elements, where you can add any number of ranges inside the axis. You can specify the start value, end value, and color for range using the startValue, endValue, and color properties as demonstrated in the following code.

  • dart
  • axes: <RadialAxis>[
            RadialAxis(minimum: 0,maximum: 150,
                    ranges: <GaugeRange>[
                        GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth:10),
                        GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10),
                        GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)]
                    )]

    range support to radial gauge

    Add pointer

    Pointers contains a list of pointer elements, where you can add any number of gauge pointers such as needlePointer, rangePointer and markerPointer inside the axis to indicate the value.

  • dart
  • axes: <RadialAxis>[
            RadialAxis(minimum: 0,maximum: 150,
            pointers: <GaugePointer>[NeedlePointer(value:90)]
            )]

    gauge pointers to radial gauge

    Add annotation

    You can add any number of widgets such as text or image as an annotation inside the axis. The position of annotation can be customized using the angle and positionFactor properties as demonstrated in the following code.

  • dart
  • axes: <RadialAxis>[
            RadialAxis(minimum: 0,maximum: 150,
            annotations: <GaugeAnnotation>[
                GaugeAnnotation(widget: Container(child:
                Text('90.0',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
                angle: 90,positionFactor: 0.5)]
                )]

    annotation support to the radial gauge

    The following code example gives you the complete code of above configurations.

  • dart
  • import 'package:flutter/material.dart';
        import 'package:syncfusion_flutter_gauges/gauges.dart';
    
        void main() => runApp(ChartApp());
    
        class ChartApp extends StatelessWidget {
    
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
                home: Scaffold(
                    body: Center(
                        child: Container(
                            child: SfRadialGauge(
                                axes: <RadialAxis>[
                                    RadialAxis(minimum: 0,maximum: 150,
                                    ranges: <GaugeRange>[
                                        GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth: 10),
                                        GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10),
                                        GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)],
                                        pointers: <GaugePointer>[NeedlePointer(value:90)],
                                        annotations: <GaugeAnnotation>[
                                            GaugeAnnotation(widget: Container(child:
                                            Text('90.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))),
                                            angle: 90,positionFactor: 0.5)]
                                    )]
                                )
                            )
                        )
                    )
                );
            }
        }