Flutter AnimatedContainer Widget

Animating the easy way

If you haven’t already seen the Widget of the Week video about the AnimatedContainer widget, watch that first.

This article will take the concepts talked about in video and turn them into real code that you can play around with yourself. The fastest way to learn is to learn by doing. So open up your favorite IDE or use DartPad and start hacking. What are you waiting for?

Setup

The starter code for this tutorial is on DartPad, so click that link and you’ll be ready to go.

If you prefer to use Android Studio or VS Code, then start a new Flutter project and replace main.dart with the following code:

Things to note:

• The state variables are at the top of the State class. You can set the…