In my last blog, I talked about the new cross-platform mobile development framework from Google called Flutter. I reviewed how Flutter took a different approach from React Native and NativeScript in creating a mobile application. For my next few blogs, I am going to cover some key aspects of Flutter.

Over the past few weeks, our in-house development team has been diving into the basics of Flutter. I have decided not to cover the basics of using Flutter in this blog because there are so many tutorials already out there. Here are just a handful of free and paid options:

Free:

Paid:

Now we are about to start on animations. For my training, I was inspired by Anthony Robledo’s YouTube video overview of the animation options in Flutter.  In that video, he breaks down the animations into three categories: implicit, transition and explicit and covers each one separately.

For this blog, I will talk about implicit animations. In future blogs, I will cover transition and explicit animations.

The implicit animation widgets derive from the abstract class ImplicitlyAnimatedWidget.  These classes allow you to easily animated basics options, such as size, opacity, Text Style, position, etc. I won’t cover all of the Implicit animation widgets but you can find more details at docs.flutter.io and at “Introduction to animations.” As with most implicit animation widgets, the AnimatedContainer widget syntax is very simple.  The key part is the duration property. This is how long the animation will take to complete.  With the duration set, any of the following container properties can be animated:

  • Alignment
  • Padding
  • Color
  • Decoration
  • ForegroundDecoration
  • Width
  • Height
  • Constraints
  • Margin
  • Transform

To keep it simple, I’ll only animate the height and width of the container.

In the code example below, the AnimatedContainer height and width are stored in state-level variables. When the height and width change, the widget will animate the change between the start and end height and width over a 500 milliseconds period.

Below you will find the full widget example.

When the Floating Action Button is clicked, the onPress function determines if the container should be 200 * 200 or should fill up the entire screen.  When the setState function is called, the State widget will call the build function. When this happens the AnimatedContainer will resize itself over a period of 500 milliseconds.

In this blog, I’ve just scratched the surface on Implicit animations. In my next blog, I’ll cover AnimatedDefaultTextStyle and AnimatedOpacity before moving on to Transition.

To see the above code in action, click on ContainerAnimation.

Share this: