Introduction to Flutter Animation

Flutter Animation is of two types. The “Implicit Animation”. And the “Explicit Animation”. The implicit animation is easier than the explicit animation. We will discuss both types of animations. Moreover, we will learn how to use them.

However, before using the animation in Flutter we must know a few facts.

We have created a special category on the Animation. Therefore, you will get all animation-related articles in that Category.

By the way, Flutter has already a few built-in Animation Widget for us.

As a result, our task is curtailed. Although we need to know how to use those built-in animation widget.

In this section, we will learn to use the AnimatedWidget.

As the name suggests, the Flutter animates the Widget. Names like AnimatedWidget, AnimatedOpacity, AnimatedContainer, or AnimatedBuilder represent both. The Implicit Animation and the Explicit Animation.

And again, names like TweenAnimationBuilder, or SlideTransition also represents both types of Animation in Flutter.

Therefore, the naming-pattern does not help us to differentiate.

However, when we find a name like SlideTransition, it does not work like AnimatedWidget. In case of the SlideTransition, the Slide is the property that we animate. And in case of AnimatedWidget, the Widget is the property that we animate.

Let us try to use the Animated Widget in our next code sample.

How do I get a moving widget?

With the help of the Animated Widget, we can move the Widget. We can rotate it. Moreover, we can control the speed of rotation.

The Animated Widget rebuilds itself when it is notified. To clarify, it needs a Listenable class. When the Listenable changes, the AnimatedWidget rebuilds. As a result, we get the moving object.

We use the AnimatedWidget with Animation objects which implements the Listenable class. In short, the Listenable includes ChangeNotifier and ValueNotifier which notify the listeners.

We will discuss these concepts in a separate article. You will find those articles in our Animation category.

What will be our first step to use the Animated Widget?

We need to subclass it and implement the build function.

import 'package:flutter/material.dart';

import 'dart:math' as math;

class RotatingWheel extends AnimatedWidget {
  const RotatingWheel({
    Key? key,
    required AnimationController controller,
  }) : super(key: key, listenable: controller);

  Animation<double> get progressOfAnimation => listenable as Animation<double>;

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      /// rotating speed is increasing
      angle: progressOfAnimation.value * 10.0 * math.pi,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          AnimatedContainer(
            color: Colors.red,
          ),
          // ignore: prefer_const_constructors
          AnimatedContainer(
            color: Colors.blue,
          ),
          AnimatedContainer(
            color: Colors.green,
          ),
          AnimatedContainer(
            color: Colors.purple,
          ),
        ],
      ),
    );
  }
}

class AnimatedContainer extends StatelessWidget {
  const AnimatedContainer({
    Key? key,
    required this.color,
  }) : super(key: key);

  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      color: color,
      child: Container(
        margin: const EdgeInsets.all(
          5.0,
        ),
        padding: const EdgeInsets.all(
          5.0,
        ),
        width: 70,
        height: 50,
        child: const Text(
          'Explicit Animation',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

As a result, we get the moving object that rotates.

Not only that, we can also control the speed of rotation.

Now it starts rotating.

We have used the Row Widget and a few Container Widgets.

How to animate a Widget?

What we have seen in the above code?

A custom class RotatingWheel extends the AnimatedWidget. After that, as a subclass, it implements the “Listenable” through the Animation Controller.

Now we can return the RotatingWheel Widget through any Stateful Widget.

import 'package:flutter/material.dart';

import 'animated_container.dart';

class MyAppHome extends StatefulWidget {
  const MyAppHome({Key? key}) : super(key: key);

  @override
  State<MyAppHome> createState() => _MyAppHomeState();
}

class _MyAppHomeState extends State<MyAppHome> with TickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    /// reducing the number increases the speed of rotation
    duration: const Duration(seconds: 3),
    vsync: this,
  )..repeat();

  static const String title = 'Explicit Animation';
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(title),
      ),
      body: RotatingWheel(controller: controller),
    );
  }
}

For full code snippet please visit the respective GitHub repository.

The Animation Controller has a “required” parameter – “duration”.

If we reduce the number of time, the speed of rotation increases.

duration: const Duration(seconds: 3),

Consequently, we get the rotating wheel.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter