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

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

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!

  • Exploring Implicit Animation Widgets Series Pt. 2 — Learn more about AnimatedListState, Hero, AnimatedWidget 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!


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.

  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 height, width.
  3. 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)

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

  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

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

  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

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

  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

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

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

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

  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

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

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.

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

  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

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

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

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

Flutter Community

Articles and Stories from the Flutter Community

Joshua de Guzman

Written by

Software Engineer at @freelancer • Founder and Community Lead at @flutterph • Passionate about mobile, cloud and AI • www.jdg.ph

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