An AnimatedContainer is an animated version of a Container widget that changes its properties over a specific period of time. In this recipe, you have created a transition animation that changes the color, width, height, and margin of a widget.
When you use an AnimatedContainer the duration is required. Here is the instruction:
AnimatedContainer(
duration: Duration(seconds: 1),
This specifies that each time a property of the AnimatedContainer changes, the transition between the old value and the new one will take 1 second.
Next, you set the property or properties of the AnimatedContainer that should change over your specified duration.
Not all the properties of an AnimatedContainer must change, but if they change, they will change together, during the time specified in the duration property.
In our project, we used four properties: color, width, height, and margin, with the following code:
color: colors[iteration],
width: sizes[iteration],
height...
