Animating with Ease: A Guide to Flutter’s AnimatedContainer Widget

On this article, we will be exploring one of the most powerful features of the Flutter framework: animations. Specifically, we’ll be taking a deep dive into the AnimatedContainerwidget and how it can be used to create beautiful and dynamic UI transitions in your Flutter applications. Whether you’re a seasoned Flutter developer or just getting started with the framework, mastering animations can take your apps to the next level and provide a more engaging and delightful user experience. So let’s get started and learn how to create stunning animations with the AnimatedCOntainer

The Container widget in Flutter offers developers the flexibility to customize its properties such as height, width, background color, and even access the BoxDecorationto add things like gradient colors and more. Animating these properties usually means changing the values of these properties over time using the AnimationController. Now, Flutter provides the AnimatedContainer widget, which works just like the regular Container widget but animates itself automatically from its old state to a new state if its values are changed. This type of animation in Flutter is known as IMPLICIT ANIMATION.

The AnimatedContainercomes with a few properties that are not found in the legacy Container , such as duration, which takes in a Durationobject and specifies the time the animation is going to last, and the curve property that specifies an animation curve like ease-in, ease-out, and so much more.

Here’s how to use Flutter’s AnimatedController:

1. Start by creating a stateful widget because we want to be able to set the state (rebuilding the widget by so doing, triggering the animation).

class AutoContainer extends StatefulWidget {
  const AutoContainer({Key? key}) : super(key: key);

  @override
  State<AutoContainer> createState() => _AutoContainerState();
}

class _AutoContainerState extends State<AutoContainer> {

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

2. Create private fields or members of the stateful class for every container property that would be animating and assign them values. The reason for this is so we can change the values later on in our code.

class AutoContainer extends StatefulWidget {
  const AutoContainer({Key? key}) : super(key: key);

  @override
  State<AutoContainer> createState() => _AutoContainerState();
}

class _AutoContainerState extends State<AutoContainer> {
  ///specifying properties that would be animated when the setState is called
  double height = 50;
  double width = 50;
  Color color = Colors.green;
  BorderRadiusGeometry borderRadius = BorderRadius.circular(8);
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

3. Create an AnimatedContainer widget inside the stateful widget and then assign those fields or member variables to the container property.

class AutoContainer extends StatefulWidget {
  const AutoContainer({Key? key}) : super(key: key);

  @override
  State<AutoContainer> createState() => _AutoContainerState();
}

class _AutoContainerState extends State<AutoContainer> {
  ///specifying properties that would be animated when the setState is called
  double height = 50;
  double width = 50;
  Color color = Colors.green;
  BorderRadiusGeometry borderRadius = BorderRadius.circular(8);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedContainer(
        ///assigning those properties to the AnimatedContainer
        ///the AnimatedContainer have the duration and curve property to add time and curve to the animation
        width: width,
        height: height,
        decoration: BoxDecoration(color: color, borderRadius: borderRadius),
        duration: const Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
        child: null,
      ),
    );
  }
}

4. Create an event that would trigger the rebuilding of the widget like a click, a button, or a GestureDetector.

class AutoContainer extends StatefulWidget {
  const AutoContainer({Key? key}) : super(key: key);

  @override
  State<AutoContainer> createState() => _AutoContainerState();
}

class _AutoContainerState extends State<AutoContainer> {
  ///specifying properties that would be animated when the setState is called
  double height = 50;
  double width = 50;
  Color color = Colors.green;
  BorderRadiusGeometry borderRadius = BorderRadius.circular(8);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedContainer(
        ///assigning those properties to the AnimatedContainer
        ///the AnimatedContainer have the duration and curve property to add time and curve to the animation
        width: width,
        height: height,
        decoration: BoxDecoration(color: color, borderRadius: borderRadius),
        duration: const Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
        child: FloatingActionButton(
          onPressed: () (
          child: const Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

5. Create a setState method and reassign those member variables inside the setState method so the widget is rebuilt with the new values, hence animating.

class AutoContainer extends StatefulWidget {
  const AutoContainer({Key? key}) : super(key: key);

  @override
  State<AutoContainer> createState() => _AutoContainerState();
}

class _AutoContainerState extends State<AutoContainer> {
  ///specifying properties that would be animated when the setState is called
  double height = 50;
  double width = 50;
  Color color = Colors.green;
  BorderRadiusGeometry borderRadius = BorderRadius.circular(8);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedContainer(
        ///assigning those properties to the AnimatedContainer
        ///the AnimatedContainer have the duration and curve property to add time and curve to the animation
        width: width,
        height: height,
        decoration: BoxDecoration(color: color, borderRadius: borderRadius),
        duration: const Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
        child: FloatingActionButton(
          onPressed: () {
            setState(() {
              width = 100.0;
              height = 100.0;
              color = Colors.blue;
              borderRadius = BorderRadius.circular(30.0):
            });
          },
          child: const Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

Now the container would automatically animated and update itself with these new values

In conclusion, the AnimatedContainer widget is a powerful tool that can be used to create stunning animations in your Flutter applications. It provides a simple and efficient way to animate properties of the Container widget, and its implicit animation capabilities make it easy to achieve smooth and seamless transitions. By following the steps outlined in this post, you can easily incorporate the AnimatedContainer widget into your code and start creating beautiful animations today.