# Animation in Flutter Radial Gauge (SfRadialGauge)

## Initial animation

The radial gauge allows all of its elements to be animated with [`enableLoadingAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/enableLoadingAnimation.html) property. The default value for this property is false. The duration of the animation can be controlled by the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/animationDuration.html) property of the gauge.

{% tabs %}
{% highlight 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
                  )
                ]
              )
            ]
          ),
        ),
      ),
    );
  }
}

{% endhighlight %}
{% endtabs %}

![gauge loading animation](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/images/animation/initial_animation.gif)

## Pointer Animation

The [`enableAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableAnimation.html) 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`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/animationType.html) property of pointer. By default, the animation type is `ease`.

{% tabs %}
{% highlight 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
                  )
                ]
              )
            ],
          ),
        ),
      ),
    );
  }
}

{% endhighlight %}
{% endtabs %}

![pointer animation](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/images/animation/animation.gif)