Creating basic container animations

In this recipe, you will place a square in the middle of the screen. When you click the IconButton in the AppBar, three animations will take place at the same time. The square will change color, size, and its top margin:

Figure 12.1: Example of AnimatedContainer

After following this recipe, you will understand how to work with the AnimatedContainer widget, one of the implicit animations, which allows the creation of simple animations with a Container.

Getting ready

In order to follow this recipe, create a new Flutter app, and call it my_animations.

How to do it...

In the following steps, you will create a new screen that shows an animation with an AnimatedContainer widget:

1. Remove the MyHomePage class created in the sample app.
2. Refactor the MyApp class as shown here:

   import 'package:flutter/material.dart';
   void main() {
     runApp(const MyApp());
   }
   class MyApp extends StatelessWidget...