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

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…