Animation in Fluter Linear Gauge (SfLinearGauge)

23 Apr 20214 minutes to read

All Linear Gauge elements such as axis along with ticks and labels, range, bar pointer, shape marker pointer and widget marker pointer can be animated separately.

Animate axis

The animateAxis and animationDuration properties in SfLinearGauge is used to animate the axis track along with the ticks and labels. The axis will have a fade-in with opacity animation when this animateAxis is set to true. By default, the animateAxis is set to false.

  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: SfLinearGauge(
                animateAxis: true,
                animationDuration: 3000
              ),
            ),
          ),
        );
      }

    Animate axis in linear gauge

    Animate range

    The animateRange and animationDuration properties in SfLinearGauge is used to animate the axis track along with the ticks and labels. The range will be have a fade-in with opacity animation when this animateRange is set to true. By default, the animateRange is set to false.

  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: SfLinearGauge(
                animateRange: true,
                animationDuration: 3000
              ),
            ),
          ),
        );
      }

    Animate range in linear gauge

    Pointer animation

    The animation behavior is common for all the three pointers in Linear Gauge - shape, widget and bar pointer.

    All the above three pointers have the below properties for animation.

    The animationType supports the below animations. The default animation type is animationType.ease.

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

    Animate bar pointer

    The below code example demonstrates updating the animation for bar pointer.

  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: SfLinearGauge(
                barPointers: [
                  LinearBarPointer(
                    value: 50,
                    animationDuration: 2000,
                    animationType: LinearAnimationType.bounceOut
                  ),
                ],
              ),
            ),
          ),
        );
      }

    Animate marker pointers (Shape and Widget Pointers)

    Both the shape and widget marker pointers will have the same set of properties and behave similarly for animation. So we have demonstrated the LinearShapePointer only but the same is applicable for LinearWidgetPointer too.

    Marker pointer with bounceOut animation

    Animate marker pointer in linear gauge