Flutter Animation: Easy Way of Learning the Flutter Implicit Animation Widgets Pt. 1

Joshua de Guzman
Sep 18, 2019 · 7 min read
Photo by Emre Karataş on Unsplash.

Introduction

Just like any other objects integrated in an app, animations must be a functional element rather than just a plain old decor.

Using the traditional frameworks, you would normally need to write complex custom animation controllers and configurations where you set the timings, tweens, and transitions. Sometimes, you may end up using third-party libraries — just to get a view component moving.

Credit: http://www.72pxdesigns.com/template/phone-animation-freebie-2/

With Flutter, animations have never been easier! Flutter comes with a rich set of ready to use animation widgets right out of the box!

Flutter Animation Series

I wrote these article series in line with the fact that most, if not all, of the widgets here, didn’t have the ❤️ they deserved — yet, in the official Flutter documentation, such as visualization of the widgets, usage, and implementation with side by side code preview. Let’s get started!

Flutter Animation Widgets

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…

The Pattern 101:

  1. Create the AnimatedSomethingWidget with the defined properties such as height, width.
  2. 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

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

  1. Create the widget’s default properties.
  2. Build an AnimationContainer using the properties.
  3. Start the animation by rebuilding the widget with the new properties.
www.github.com/joshuadeguzman

Triggers

  • dimensions/sizes (eg. height, width, borderRadius, padding)
  • colors, shape and more!
www.github.com/joshuadeguzman

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!

www.github.com/joshuadeguzman

Flutter Widget of the Week
https://www.youtube.com/watch?v=yI-8QHpGIP4

2. AnimatedCrossFade

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

Setup

  1. Define a bool variable that will act as a flag for showing/hiding widgets
  2. Assign the flag variable to the AnimatedCrossFade widget.
  3. Start the animation by updating the crossFadeState property value.
www.github.com/joshuadeguzman

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!

www.github.com/joshuadeguzman

3. AnimatedDefaultTextStyle

Setup

  1. Define the non-final textStyle variable.
  2. Assign the defined variable to the widget’s textStyle property.
  3. Start the animation by updating the declared style.
www.github.com/joshuadeguzman

Triggers

  • Option 1. By directly changing the textStyle.
www.github.com/joshuadeguzman
  • Option 2. Updating the properties inside the TextStyle attached to the widget.
www.github.com/joshuadeguzman

Further Tweaks

AnimatedDefaultTextStyle(
curve: Curves.elasticIn,
...
)

Let’s add labels inside our bar charts!

www.github.com/joshuadeguzman

4. AnimatedPadding

Setup

  1. Define the padding variable.
  2. Create the AnimatedPadding with the declared padding.
  3. Start the animation by updating the declared padding value.
www.github.com/joshuadeguzman

Trigger

  • padding
www.github.com/joshuadeguzman

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.

www.github.com/joshuadeguzman

Flutter Widget of the Week
https://www.youtube.com/watch?v=PY2m0fhGNz4

5. AnimatedOpacity

Setup

  1. Define the animation’s duration.
  2. Define the _opacity variable.
  3. Start the animation by updating the declared _opacity value.
www.github.com/joshuadeguzman

Trigger

  • opacity
www.github.com/joshuadeguzman

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

Setup

  1. Define the state variables for the colors and desired borderRadius or elevation.
  2. Include it when writing the AnimatedPhysicalModel widget.
  3. Start the animation by updating the declared values.
www.github.com/joshuadeguzman

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

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

www.github.com/joshuadeguzman

Usage

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

Triggers

  • top, right, left, bottom
www.github.com/joshuadeguzman

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! 😎

www.github.com/joshuadeguzman

8. AnimatedSize

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
www.github.com/joshuadeguzman

Usage

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

Triggers

  • height and width
www.github.com/joshuadeguzman

Well, that’s a lot to master…

Conclusion

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

Further Reading

Flutter Community

Articles and Stories from the Flutter Community