Learn Flutter complex animations with a real-world example [Part 2]

Juan
ITNEXT
Published in
6 min readOct 17, 2020

--

Photo by Kelly Sikkema on Unsplash

This is the second part of the tutorial, which is divided into 2 parts:

— Part 1: Setting up the project, and animating the top left and top right squares.

— Part 2: Animating the bottom left and bottom right squares, as well as fading in the text

We are building an animation for the logo of Arcaweb, a swiss company based in the heart of Agno, Ticino.

The final source code is available on https://github.com/juancurti/flutteranimationtutorial

Our goal is the following:

Result of our animation of Arcaweb logo

At this point our animation looks like this:

Animation at the moment

Building our bottom squares:

Now, for building our bottom squares the procedure is almost the same. Almost, because the left bottom square will remain the same, but we will handle the bottom right separately since it will also present the rotation animation, and we will have to play a bit with margins to make it look exactly as we want.
Our goal now is to replicate what we did with our past squares but leaving the bottom right one empty.

Let’s add the variables of our animationController and our tween animation, as we did before:

AnimationController _squareBottomLeftAnimCont;
Animation<double> _squareBottomLeftAnim;

Adding (in order as we follow) in our _initAnimations method the following:

...
_squareBottomLeftAnimCont = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
_squareBottomLeftAnim = Tween<double>(begin: 0, end: 300).animate(
CurvedAnimation(
parent: _squareBottomLeftAnimCont, curve: Curves.bounceOut));
...
this._executeAnimation(animation: _squareBottomLeftAnimCont, interval: 600);
}

--

--

Writer for

Software Engineer, Entrepreneur and Writer — Italy 🇮🇹