How to Make Radial Car Speed Meter Like Gauge in Flutter

In this example, we are going to show to make a car speedometer like radial gauge in flutter easily using the package. It is very hard for beginners to draw such figures in Flutter with custom paint. Follow the guide below to draw a speedometer-like radial gauge in Flutter app.

First, you need to add syncfusion_flutter_gauges Flutter package to your dependency by adding following lines in pubspec.yaml file. 

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_gauges: ^19.1.64

Import package to your script:

import 'package:syncfusion_flutter_gauges/gauges.dart';

Draw Radial Guage with Syncfusion Gauges Package:

SizedBox( 
  width:250, height:250, //height and width of guage
  child:SfRadialGauge(
    title: GaugeTitle(text: "Speed Meter"), //title for guage
    enableLoadingAnimation: true, //show meter pointer movement while loading
    animationDuration: 4500, //pointer movement speed 
    axes: <RadialAxis>[ //Radial Guage Axix, use other Guage type here
      RadialAxis(minimum: 0,maximum: 150,
          ranges: <GaugeRange>[ //Guage Ranges
                GaugeRange(startValue: 0,endValue: 50, //start and end point of range
                          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)
                //add more Guage Range here
            ],
          pointers: <GaugePointer>[
                      NeedlePointer(value:80, ) //add needlePointer here
                      //set value of pointer to 80, it will point to '80' in guage
                  ],
          annotations: <GaugeAnnotation>[
              GaugeAnnotation(
                      widget: Container(
                          child: Text('80.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))
                        ),
                      angle: 90,
                      positionFactor: 0.5),
              //add more annotations 'texts inside guage' here
          ]
    )]
  ),
)

Full Dart Code Example: 

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(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Radial Speed Meter Gauge"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container( 
            alignment: Alignment.center,
            height:250,
            child: SizedBox( 
              width:250, height:250, //height and width of guage
              child:SfRadialGauge(
                title: GaugeTitle(text: "Speed Meter"), //title for guage
                enableLoadingAnimation: true, //show meter pointer movement while loading
                animationDuration: 4500, //pointer movement speed 
                axes: <RadialAxis>[ //Radial Guage Axix, use other Guage type here
                  RadialAxis(minimum: 0,maximum: 150,
                      ranges: <GaugeRange>[ //Guage Ranges
                            GaugeRange(startValue: 0,endValue: 50, //start and end point of range
                                      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)
                            //add more Guage Range here
                        ],
                      pointers: <GaugePointer>[
                                 NeedlePointer(value:80, ) //add needlePointer here
                                 //set value of pointer to 80, it will point to '80' in guage
                              ],
                      annotations: <GaugeAnnotation>[
                          GaugeAnnotation(
                                 widget: Container(
                                     child: Text('80.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))
                                    ),
                                  angle: 90,
                                  positionFactor: 0.5),
                          //add more annotations 'texts inside guage' here
                      ]
                )]
              ),
            ),
          )
       );
  }
}

Output Screenshot:

In this way, you can build a Speedometer radial gauge in Flutter app easily using package.