How we can implement Animated Align

The Animated Align belongs to the ImplicitlyAnimatedWidgets. The “Implicit Animation” automatically animates the changes in their properties. To implement the AnimatedAlign we do not have to do anything explicitly.

Why?

Because, firstly, the AnimatedAlign is an implicitly version of the Align Widget. Secondly, it powers the Animation by its own AnimationController.

As we have discussed earlier, the Implicit Animation is much faster than the Explicit Animation. However, it has some limitations.

We can control the Animation either by the “curve” or the “duration” properties.

Let us quickly take a look at the screenshots. It will give us an idea of how things take place.

The image above shows four Container Widgets. Each Container Widget has another small Container inside.

Once the Animation starts, the inside Container moves from one place to the other.

Basically, the inside Container Widgets place themselves as we have directed.

Center(
            child: Container(
              width: 100.0,
              height: 100.0,
              color: Colors.red,
              child: AnimatedAlign(
                alignment:
                    selected ? Alignment.topCenter : Alignment.bottomCenter,
                duration: const Duration(seconds: 20),
                curve: Curves.fastOutSlowIn,
                child: Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.yellow,
                ),
              ),
            ),
          ),

What is alignment animation?

In the above code we see that the AnimatedAlign has two properties which play important roles. The duration, and the curve for the animation.

duration: const Duration(seconds: 20),
curve: Curves.fastOutSlowIn,

The other important property is the “alignment”.

alignment: selected ? Alignment.topCenter : Alignment.bottomCenter,

The “selected” is defined in the “setState()” function.

onTap: () {
        setState(() {
          selected = !selected;
        });
      },

For the full code snippet please visit the respective GitHub Repository.

Animated version of Align which automatically transitions the child’s position over a given duration whenever the given alignment changes.

As a result, we can see the change takes place. The inner Container Widgets change their places.

And, finally, the inner Container Widgets place themselves as directed.

According to the “duration” property, the time changes.

How do you use animated position in flutter?

As we have set the the curve as well as the duration properties, the AnimatedAlign adjusts its position to the new target alignment.

With the help of the AlignTransition we can acquire more control over the Animation.

However, the life-cycle of the AnimationController should be managed manually.

In the Explicit Animation section we will discuss this later.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter