Let’s begin. Given we have our app like this:

… that will look like this:

UI that wants to get animated.

To meet the needs of Flutter’s composition approach we will design a Widget FadeIn that wraps each UI widget and applies a fade-in animation to it.

It will take the following parameters:

delay : an abstract unit to specify the order in which we fade-in our elements. We’ll use on a Double value. (Larger values = appear later)

: an abstract unit to specify the order in which we fade-in our elements. We’ll use on a Double value. (Larger values = appear later) child: the Widget to animate.

Let’s take a look of it’s code and discuss how we realized it:

From line 2 till 6 we just apply our widget variables. Then we have the Widget’s builder function. It utilizes two aspects of simple_animation.

First we design a MultiTrackTween. It’s an Animatable that tweens multiple properties at once. We want to animate in parallel

the opacity from 0.0 (invisible) to 1.0 (fully visible) and

from (invisible) to (fully visible) and a translation on the x-axis from 130.0 (looking a little displaced) to 0.0 (looking unmodified).

Then we want to animate this tween using ControlledAnimation, a widget that simplifies tween-based animation.

The following line solves our delay-requirements by translating our abstract Double value into time. You can freely play around with this value to get results you like:

delay: Duration(milliseconds: (300 * delay).round())

The animation execution will wait until the specified Duration is passed.

The rest is just using the builderWithChild function to efficiently build the animated scene using a pre-build child. In the builder function we use Flutter’s build-in Translate and Opacity widgets, that we are feeding with the tweened values.