Animation In Flutter: AnimatedContainer

We've seen how to make Explicit animation with the Animation class, Tween animation, and CurvedAnimation in previous tutorials.
We've also tweaked the bouncing effect in our bouncing ball example to make it look more realistic.
Previous Article Animation :
AnimatedContainer is another Implicit animated widget that we'll learn about in this tutorial.

AnimatedContainer

If I had to explain AnimatedContainer in a single sentence, I would say:

AnimatedContainer is an animated version of a traditional Container
Using AnimatedContainer, we can animate almost every feature of the Container widget.
Because AnimatedContainer is an implicit animation, no controller is required to control the animation.
We can animate height, width, color, border, borderRadius, shadow, and so on.
Let's pick up where we left off in the previous example. I am going to make just one change in that particular example, which is shown below :
https://gist.github.com/red-star25/9b02b81f1b226a0f1b13dfe7189528d9
As you can see I've added one Container below the Ball which is bouncing. And Also wrapped that container inside the GestureDetector which will be used to animate the container.
The UI will look like below, If you run the app.
Now to animate the container we first need to convert the Container to AnimatedContainer. So let's do that first :

GestureDetector(
  onTap: () => {},
  child: AnimatedContainer(
    height: 20,
    width: 60,
    color: Colors.blueGrey,
 )
)

The AnimatedContainer has one required property which is duration. It's nothing more than a timer that determines how long the animation will run for.
Let's use 2 seconds as an example.

GestureDetector(
  onTap: () => {},
  child: AnimatedContainer(
    duration: const Duration(seconds:2),
    height: 20,
    width: 60,
    color: Colors.blueGrey,
 )
)

Now, to animate the properties of the Container we need to create some kind of notifier that tells the container when it should start the animation.
You can directly start the animation when the page loads. But In this example, I'll trigger the animation by tapping into it.
Let's start by defining a boolean. Which is used to start an animation when the user taps it.
```
bool isAnimating = false;
```
When the user taps inside the container, the value of the isAnimating variable will be changed.
To accomplish so, we must update it in the onTap function of the GestureDetector.

GestureDetector(
  onTap: () => {
      setState(() {
         isAnimating = !isAnimating;
      });
  },
  child: AnimatedContainer(
    duration: const Duration(seconds:2),
    height: 20,
    width: 60,
    color: Colors.blueGrey,
 )
)

Now it's time to animate the Container.

`width` and `height` Animation:

Initially, the width and height of our Container are 60 and 20. Let's change the width when the user taps the Container:

GestureDetector(
  onTap: () => {
      setState(() {
         isAnimating = !isAnimating;
      });
  },
  child: AnimatedContainer(
    duration: const Duration(seconds:2),
    height: isAnimating ? 200 : 20,
    width: isAnimating
                      ? MediaQuery.of(context).size.width * .8
                      : 60,
    color: Colors.blueGrey,
       )
)

As you can see the AnimatedContainer is automatically changing and also animating the Container's width and height smoothly.

`color` Animation:

AnimatedContainer(
    duration: const Duration(seconds:2),
    height: isAnimating ? 200 : 20,
    width: isAnimating
                      ? MediaQuery.of(context).size.width * .8
                      : 60,
    color: isAnimating ? Colors.deepOrange : Colors.blueGrey,
)

`border` and `borderRadius` Animation:

AnimatedContainer(
    duration: const Duration(seconds:2),
    height: isAnimating ? 200 : 20,
    width: isAnimating
                      ? MediaQuery.of(context).size.width * .8
                      : 60,
    decoration: BoxDecoration(
           color: isAnimating ? Colors.deepOrange : Colors.blueGrey,
           borderRadius: isAnimating
                        ? const BorderRadius.only(
                            topLeft: Radius.circular(80),
                            topRight: Radius.circular(80),
                          )
                        : const BorderRadius.all(
                            Radius.circular(0),
                          ),
            border: Border.all(
                      color: isAnimating ? Colors.blue : Colors.teal,
                      width: isAnimating ? 10 : 2,
            ),
     ),
)

Make sure to move color in the BoxDecoration, otherwise, you'll get an error.

Adding `Curves`

You can also tweak the animation's curves by adding them inside the curve properties.
You will find different Curves Here

AnimatedContainer(
    duration: const Duration(seconds:2),
    height: isAnimating ? 200 : 20,
    width: isAnimating
                      ? MediaQuery.of(context).size.width * .8
                      : 60,
    curve: isAnimating ? Curves.bounceIn : Curves.bounceOut,
    decoration: BoxDecoration(
           color: isAnimating ? Colors.deepOrange : Colors.blueGrey,
           borderRadius: isAnimating
                        ? const BorderRadius.only(
                            topLeft: Radius.circular(80),
                            topRight: Radius.circular(80),
                          )
                        : const BorderRadius.all(
                            Radius.circular(0),
                          ),
            border: Border.all(
                      color: isAnimating ? Colors.blue : Colors.teal,
                      width: isAnimating ? 10 : 2,
            ),
     ),
)

`onEnd` Function

If you want to do something when the animation completes. You can do that inside the onEnd function of the AnimatedContainer.

AnimatedContainer(
   //....
  onEnd: () {
         setState(() {
             animationEnd = true;
         });
    },
),

You may animate any AnimatedContainer child in the same way as the other properties.
There are many additional properties that we can animate in the same way, such as alignment, transform, margin, and padding.

Final Words

Thank you for taking the time to read this article. If you found it useful, please share it with others. Also, if you have any suggestions, please leave them in the comments section.
See you soon. Until then....

Animation In Flutter: AnimatedContainer

Comments (1)

Animation In Flutter

Animation In Flutter: Animation Class, Tween & CurvedAnimation

More from this blog

100 Blogs Later: Lessons from Code, Content, and Consistency

A Practical Journey from Application to Distributed Systems - Part 6

A Practical Journey from Application to Distributed Systems - Part 5

A Practical Journey from Application to Distributed Systems - Part 4

A Practical Journey from Application to Distributed Systems - Part 3

AnimatedContainer

`width` and `height` Animation:

`color` Animation:

`border` and `borderRadius` Animation:

Adding `Curves`

`onEnd` Function

Final Words

Command Palette

Comments (1)

Animation In Flutter

Animation In Flutter: Animation Class, Tween & CurvedAnimation

More from this blog

AnimatedContainer

width and height Animation:

color Animation:

border and borderRadius Animation:

Adding Curves

onEnd Function

Final Words

`width` and `height` Animation:

`color` Animation:

`border` and `borderRadius` Animation:

Adding `Curves`

`onEnd` Function