Easy Way of Learning the Flutter Implicit Animated Widgets

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 into an app, animations must be a functional element rather than just 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.

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

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 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”.

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

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.

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

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.

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

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.

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

1. Define the padding variable.
2. Create the AnimatedPadding with the declared padding.
3. 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](https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html?ref=joshuamdeguzman.com) 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.

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

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.

Triggers

• borderRadius
• elevation
• shadowColor

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.

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

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](https://api.flutter.dev/flutter/scheduler/Ticker-class.html?ref=joshuamdeguzman.com) 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

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

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

• https://flutter.dev/docs/development/ui/animations
• https://flutter.dev/docs/development/ui/widgets/animation