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

Joshua de Guzman
Sep 18 · 7 min read

Introduction

Animations play a major role in enhancing the overall user experience of your app — from the visual feedback, motion, and up to the custom animations you can ever imagine!

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

  • Exploring Implicit Animation Widgets Series Pt. 2 — Learn more about , , and more! (Coming soon!)

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

Implicit Widgets: Widgets that are ready to be animated right off the bat — widgets such as , , .
Explicit Widgets: This is where you explicitly define how your animation widgets should look like or behave using , , , 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:

  1. Defining the specific properties that are responsible for triggering the animation of the widget.
  2. Create the AnimatedSomethingWidget with the defined properties such as , .
  3. Start the animation by rebuilding the widget, most commonly done for UIs using , 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 class helps you create a widget with specific properties such as , , and more. This is commonly used for wrapping child widgets to manage their properties such as sizes, paddings, and margins conveniently.

Using the , you can animate a regular 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 using the properties.
  3. Start the animation by rebuilding the widget with the new properties.
www.github.com/joshuadeguzman

Triggers

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

Further tweaks
You can also set the optional 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

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

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

Setup

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

Trigger

Further tweaks
You can set the optional via and .

AnimatedCrossFade(
firstCurve: Curves.bounceIn,
secondCurve: Curves.bounceOut,
...
)

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

www.github.com/joshuadeguzman

3. AnimatedDefaultTextStyle

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

Setup

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

Triggers

  • Option 1. By directly changing the .
www.github.com/joshuadeguzman
  • Option 2. Updating the properties inside the 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

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

Setup

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

Trigger

www.github.com/joshuadeguzman

Further Tweaks

AnimatedPadding(
curve: Curves.elasticInOut,
...
)

Let’s get back to our animated bar charts!
How about adding a child ? Let’s wrap it inside an 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

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

Setup

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

Trigger

www.github.com/joshuadeguzman

You will notice that is almost similar to . 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 and of a widget.

Setup

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

Triggers

www.github.com/joshuadeguzman

Further Tweaks!

AnimatedPhysicalModel(
curve: Curves.bounceInOut,
...
)

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

7. AnimatedPositioned

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

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

www.github.com/joshuadeguzman

Usage

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

Triggers

  • , , ,
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 in our bar charts! 😎

www.github.com/joshuadeguzman

8. AnimatedSize

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

NOTE: You are required to add a object in the widget tree for the 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 .
  2. Define the and variable.
  3. Provide a object in the widget tree, assign to the widget's property.
  4. Start the animation by updating the declared dimension values.

Triggers

  • and
www.github.com/joshuadeguzman

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

Flutter Community

Articles and Stories from the Flutter Community

Joshua de Guzman

Written by

Mobile Engineer at @freelancer. Have a passion for learning and teaching. #flutterdotph #android #flutter #ios #mobile #cloud #ai. www.joshdeguzman.com

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade