Flutter Animation Widgets

Implicit Widgets: Widgets that are ready to be animated right off the bat — widgets such as AnimatedContainer , Hero , FadeTransition .

Explicit Widgets: This is where you explicitly define how your animation widgets should look like or behave using Animator , AnimationController , Tween , and more.

In this article, we will focus on how Flutter Implicit Animation Widgets behave, how they are implemented, and see where we can apply them.

The Pattern…

I would like to start by pointing out the pattern for using implicitly animated widgets. If not all, most of the widgets that we will be discussing here will have a similar setup.

The Pattern 101:

Defining the specific properties that are responsible for triggering the animation of the widget. Create the AnimatedSomethingWidget with the defined properties such as height , width . Start the animation by rebuilding the widget, most commonly done for UIs using setState() , with the new values assigned to the defined properties. In this article, I will be referring to this as the animation “triggers”.

Furthermore, I will categorize the widgets based on their setup complexity (Series Pt. 1: Easy, Series Pt. 2: Intermediate, and Advanced)— source code available below.

Just a random cat repeatedly showing off his typing pattern 101 skills

The EZ (Easy)

1. AnimatedContainer

The Container class helps you create a widget with specific properties such as height , width , color and more. This is commonly used for wrapping child widgets to manage their properties such as sizes, paddings, and margins conveniently.

Using the AnimatedContainer , you can animate a regular Container by just changing its properties. It automatically transitions the color, the sizes without you having the explicitly setting custom tweens or controllers.

Default curve is set to Curves.linear

Setup

Create the widget’s default properties. Build an AnimationContainer using the properties. Start the animation by rebuilding the widget with the new properties.

Triggers

dimensions/sizes (eg. height , width , borderRadius , padding )

, , , ) colors, shape and more!

Further tweaks

You can also set the optional curve to make the animation feel smoother based on the configurations you set.

AnimatedContainer(

curve: Curves.bounceInOut,

...

)

Create some awesome animated bar charts using this widget!

Flutter Widget of the Week

https://www.youtube.com/watch?v=yI-8QHpGIP4

2. AnimatedCrossFade

Cross-fade animations (a.k.a. dissolve) gradually fade out a UI component while simultaneously fading in another UI component.

The AnimatedCrossFade is a widget that provides a cross-fade transition when switching between two given child widgets.

Setup

Define a bool variable that will act as a flag for showing/hiding widgets Assign the flag variable to the AnimatedCrossFade widget. Start the animation by updating the crossFadeState property value.

Trigger

crossFadeState

Further tweaks

You can set the optional curve via firstCurve and secondCurve .

AnimatedCrossFade(

firstCurve: Curves.bounceIn,

secondCurve: Curves.bounceOut,

...

)

Let’s tweak our bar charts by adding a loading indicator!

3. AnimatedDefaultTextStyle

DefaultTextStyle class is the initial text style applied to a Text widget. With AnimatedDefaultTextStyle , you can now make our Text widgets, or even CTAs more engaging.

Setup

Define the non-final textStyle variable. Assign the defined variable to the widget’s textStyle property. Start the animation by updating the declared style.

Triggers

Option 1. By directly changing the textStyle .

Option 2. Updating the properties inside the TextStyle attached to the widget.

Further Tweaks

AnimatedDefaultTextStyle(

curve: Curves.elasticIn,

...

)

Let’s add labels inside our bar charts!

4. AnimatedPadding

AnimatedPadding helps you transition the padding changes in a Padding widget during runtime within a given duration.

Setup

Define the padding variable. Create the AnimatedPadding with the declared padding . Start the animation by updating the declared padding value.

Trigger

padding

Further Tweaks

AnimatedPadding(

curve: Curves.elasticInOut,

...

)

Let’s get back to our animated bar charts!

How about adding a child Container ? Let’s wrap it inside an AnimatedPadding with insets pushing it from the top.

Flutter Widget of the Week

https://www.youtube.com/watch?v=PY2m0fhGNz4

5. AnimatedOpacity

Opacity is pretty self-explanatory — it’s responsible for updating the transparency of a UI component. AnimatedOpacity is a widget on top of the default Opacity widget — it animates the changes based on its opacity property.

Setup

Define the animation’s duration . Define the _opacity variable. Start the animation by updating the declared _opacity value.

Trigger

opacity

You will notice that is almost similar to AnimatedCrossFade . However, as seen in the setup, this doesn’t require you to wrap two child widgets — widget just fades.

Flutter Widget of the Week

https://www.youtube.com/watch?v=9hltevOHQBw

6. AnimatedPhysicalModel

A widget that automatically transitions the change in borderRadius and elevation of a PhysicalModel widget.

Setup

Define the state variables for the colors and desired borderRadius or elevation . Include it when writing the AnimatedPhysicalModel widget. Start the animation by updating the declared values.

Triggers

borderRadius

elevation

shadowColor

www.github.com/joshuadeguzman

Further Tweaks!

AnimatedPhysicalModel(

curve: Curves.bounceInOut,

...

)

This widget also transitions the changes in the color of the elevation , making it seem like there’s a reflective shadow underneath. You can optionally enable or disable this by updating the animateShadowColor property.

7. AnimatedPositioned

This widget is written on top of the traditional Positioned widget. It helps you transition your widget’s position in a Stack widget, given an updated set of position values.

NOTE: This widget only works if it’s a child of a Stack widget.

www.github.com/joshuadeguzman

Usage

Define the animation’s duration . Define the state variables for the position of the widget. Start the animation by updating the declared position values.

Triggers

top , right , left , bottom

Let’s try animating the initialization of our bar charts!

As always, you can apply further tweaks for the curves! But this time, let’s see what it would look like if we use Curves.fastOutSlowIn in our bar charts! 😎

8. AnimatedSize

AnimatedSize transitions its size based on its child widget’s dimensions — height and width . It is likely similar to an AnimatedContainer , however this widget just focuses on the aforementioned property values.

NOTE: You are required to add a Ticker object in the widget tree for the AnimatedSize widget. Otherwise, you will encounter an error on runtime animating the widget.

AnimatedSize widget with Curves.elasticInOut

Usage

Define the animation’s duration . Define the _height and _width variable. Provide a Ticker object in the widget tree, assign this to the widget's vsync property. Start the animation by updating the declared dimension values.

Triggers

height and width

Well, that’s a lot to master…

Well, widgets are at the core of Flutter for building beautiful and powerful apps — everything you read is a Widget ! Don’t forget to drink a cup of coffee or take a power nap before you start coding some magic!

Conclusion

These are some of the widgets which I found easy to setup. I will add the link to the next series soon as I finish writing it!

For the meantime, if you have questions or suggestions, feel free to send it on my Twitter account or comment them down here below.

Resources

Github Repository

https://github.com/joshuadeguzman/flutter-examples

Further Reading