How To Use Animated Container In Flutter? Explained With Example

In this article, we will discuss flutter animated container in flutter in detail, how we can animated the animated container size, how can we implement animation in animated container. We will explain everything in detail of how the animation works in container, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter animated container.

Introduction: Flutter Animated Container

In our previous container customization article, we have understand how the container widget works, its color, height, width, decoration etc. In this article, we will discuss how the animated container works in flutter app. Its really a cool widget in which you can do animation directly by using its own properties. Let’s look at how to implement it in flutter app.

Implementation

AnimatedContainer(

          duration: Duration(milliseconds: 900))

Animated container class is used to implement the animated container, as you can see in the above code. Let’s see its properties now.

Duration

duration: Duration(milliseconds: 900)

Duration constructor defines how much time will the animation take when it is triggered. Let’s say we want to animate the size of animated container from 50 to 500 then by specifying the duration, we can choose whether the animation will be faster or slower from 50 to 500. Using the duration class we can specify the duration time. As for demonstration, we have used the milliseconds constructor, we have given it a value of 900. Now let’s decorate our container so we can see our container while its animating.

Decoration

AnimatedContainer(
          duration: Duration(milliseconds: 900),
          height: 300,
          width: 300,
          decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(500)),

        )

As we can see, it is just like a normal container, it has decoration, color, height, width and an added constructor of duration. It won’t animate now. Let’s see how to animate it.

Gesture Detector

double circular=0;

GestureDetector(

        onTap: () {

          setState(() {

            circular = 500;

          });

        },

        child: AnimatedContainer(

          duration: Duration(milliseconds: 900),

          height: 300,

          width: 300,

          decoration: BoxDecoration(

              color: Colors.blue,

              borderRadius: BorderRadius.circular(circular)),

        ),

      )

We have wrapped our container with a gesture detector and we have specified the circular value to 500 whenever the user taps on that container. Initial value of the circular variable is 0. We have used the circular variable in the border radius constructor, which we can see in the above code. Now whenever we tap on the animated container, the ontap will be called and the circular value will be changed from 0 to 500. This value change will be reflected as the animation in the container. The edges of the container will transform from sharp to rounded. Let’s see how this animation works in the video given below:

In this video, we can see that when we tap on the container, the shape of the container changes, which is what we want, we can use other constructors of duration class as well like seconds etc.

Animated Size Of Container

Let’s now try our animation using the height and width of container.

  double height = 50;

  double width = 50;

We have used two variables for height and width and have give both of them a value of 50.

Let’s Animate The Container

GestureDetector(

        onTap: () {

          setState(() {

            height = 300;

          width = 300;

           

          });

        },

        child: AnimatedContainer(

          duration: Duration(milliseconds: 900),

          height: height,

          width: width,

          decoration: BoxDecoration(

              color: Colors.blue,

              borderRadius: BorderRadius.circular(10)),

        ),

      )

As we can see that we have specified the height and width value to 300 when the user taps on the container. The initial value of height and width is 50 and by tapping on the container, then values changes to 300. Let’s see how it will animated container when the value changes:

Animated Container Position

Let’s now try to change the position of container using its animation. For that, we will use the margin property of container:

double bottom = 0;

We have set the initial value of bottom variable to 0 and upon tapping the container, we will set it to 150. We have used this value in the bottom margin of our container. Let’s see how it will animate when the value of bottom margin changes from 0 to 150. Let’s look at the animation takes place in the video given below:

We can see in the above video how beautifully the container position is changing. Let’s now try to build a beautiful animated containers animations. We will create this design that you can see below.

For this beautiful animated containers, we have used stack widget, column widget, container widget etc. to make the animation look more beautiful. You can now customize your container in your way like change the position, size, color and can even rotate the container using animation. We would love to see what you have made and would love to see your feedback on that animated container widget.

Conclusion

That’s all for this article, hope you enjoyed it and have learnt a lot from it. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing Flutter concepts. Thank you reading this article.