Colors / Numbers Game with Flutter Implicit Animations

Ever wanted to spice up your Flutter apps with some animations, but don't know how?

Implicit animations are often the easiest way, and this tutorial will show you how to use them.

But first, here's a fun game that I've built for you. You can run it directly here on this embedded Flutter web view:

The purpose of the game is to follow the instructions and tap on the correct item. But this is a bit of a brain teaser because there is a mismatch between the text color and what the text says.

So have a play the game and see if you can beat my high score, which is 11 points.

How do these animations work?

Here's a Dartpad playground that you can use to run this game and study the code:

This playground plays the same game as above but doesn't include the animations code. So let's see how to enable it.

A good place to start is by looking at the build() method. This returns a Stack that contains some children, including some Align widgets:

// Player
// TO DO: Convert to AnimatedAlign & add a duration argument
Align(
  alignment: _playerAlignment,
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: _targetData.color,
      shape: BoxShape.circle,
    ),
  ),
),
// Targets
for (var i = 0; i < _targetColors.length; i++)
  GestureDetector(
    // Handle taps on targets
    onTapDown: (details) => _handleTapDown(details, i),
    // TO DO: Convert to AnimatedAlign & add a duration argument
    child: Align(
      alignment: _targets[i],
      child: Target(
        color: _targetColors[i],
        textColor: _textColors[i],
        text: i.toString(),
      ),
    ),
  ),

This code is responsible for rendering the player (big circle in the game), along with all the targets (smaller circles with text inside).

The code uses Align widgets to position the player and the targets at specific positions on screen.

And whenever we tap on a target, all the targets instantly move to a new random position. But how can we turn this into an animated transition? AnimatedAlign is the answer.

Align → AnimatedAlign

AnimatedAlign is one of many implicitly animated widgets that you can use in Flutter.

Let's see how to use it and focus on the player first. All we have to do is to convert this code:

Align(
  alignment: _playerAlignment,
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: _targetData.color,
      shape: BoxShape.circle,
    ),
  ),
)

to this:

// 1. convert to AnimatedAlign
AnimatedAlign(
  alignment: _playerAlignment,
  // 2. Add a duration
  duration: Duration(milliseconds: 250),
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: _targetData.color,
      shape: BoxShape.circle,
    ),
  ),
)

That's it. If we run the app again we can see that every time we tap somewhere, the player (big circle) now animates to the new position.

Likewise, we can animate the targets by converting them to AnimatedAlign widgets:

for (var i = 0; i < _targetColors.length; i++)
  GestureDetector(
    // Handle taps on targets
    onTapDown: (details) => _handleTapDown(details, i),
    // 1. convert to AnimatedAlign
    child: AnimatedAlign(
      alignment: _targets[i],
      // 2. Add a duration
      duration: Duration(milliseconds: 250),
      curve: Curves.easeInOut,
      child: Target(
        color: _targetColors[i],
        textColor: _textColors[i],
        text: i.toString(),
      ),
    ),
  ),

Job done. We can now play the game and everything is in motion. 🙂

However, both the player and the target move at constant speed, which is not how objects behave in the real world.

Curves

We can tweak the animation curve so that the speed of the transition feels a bit more natural.

To accomplish this, we need to add a curve argument to our AnimatedAlign widgets:

curve: Curves.easeInOut,

And if we run again, we can see that all the items move in a more natural way when a new transition takes place.

Flutter supports a wide range of pre-built curves. Check the documentation for the Curves class for more info. All of Flutter's implicit animated widgets take a curve argument and you can use curves with explicit animations as well.

Where can I learn more about animations?

Glad you asked. The Flutter documentation has a very good introduction to Animations, where you can learn about all the basics.

And if you want to learn how to build a complete, real app with custom UI and animations in Flutter, you can check out my brand new Flutter Animations course.

With over 7 hours of content, this course covers everything you need to know to master animations in Flutter, and much more.