Animation in Flutter Radial Gauge (SfRadialGauge)

6 Aug 20268 minutes to read

Initial animation

The radial gauge allows all of its elements to be animated with enableLoadingAnimation property. The default value for this property is false. The duration of the animation can be controlled by the animationDuration property of the gauge.

DART

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

void main() => runApp(const RadialGaugeDemo());

class RadialGaugeDemo extends StatelessWidget {
  const RadialGaugeDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfRadialGauge(
            enableLoadingAnimation: true, 
            animationDuration: 4500,
            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
                  )
                ]
              )
            ]
          ),
        ),
      ),
    );
  }
}

Pointer Animation

The enableAnimation property of pointer allows you to enable or disable animation for pointers. The gauge pointer supports the following animation types:

• bounceOut
• ease
• easeInCir
• easeOutBack
• elasticOut
• linear
• slowMiddle

The animation type can be changed using the animationType property of pointer. By default, the animation type is ease.

DART

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

void main() => runApp(const RadialGaugeDemo());

class RadialGaugeDemo extends StatelessWidget {
  const RadialGaugeDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfRadialGauge(
            axes: <RadialAxis>[
              RadialAxis(
                axisLineStyle: AxisLineStyle(thickness: 30), 
                showTicks: false,
                pointers: <GaugePointer>[
                  NeedlePointer(
                    value: 60, 
                    enableAnimation: true,
                    needleStartWidth: 0,
                    needleEndWidth: 5, 
                    needleColor: Color(0xFFDADADA),
                    knobStyle: KnobStyle(
                      color: Colors.white, 
                      borderColor: Color(0xFFDADADA),
                      knobRadius: 0.06,
                      borderWidth: 0.04
                    ),
                    tailStyle: TailStyle(
                      color: Color(0xFFDADADA), 
                      width: 5,
                      length: 0.15
                    )
                  ),
                  RangePointer(
                    value: 60, 
                    width: 30, 
                    enableAnimation: true, 
                    color: Colors.orange
                  )
                ]
              )
            ],
          ),
        ),
      ),
    );
  }
}