Mastering Flutter Animations: A Beginner’s Guide to AnimatedContainer

Flutter’s AnimatedContainer widget is an effective tool for quickly and easily incorporating animations into your user interface (UI). In essence, it’s a Container widget with animation built right in.

Animated Container entails modifying the features of the Container widget over time. You may animate color, size, border, and shape by changing their properties from old to new and animating the transition between properties. The animated container contains implicit animations.

Making Animated Effects with Flutter’s AnimatedContainer

To use the AnimatedContainer widget, first indicate whatever characteristics you want to animate, such as color, size, or padding. Use the AnimatedContainer to surround the widget that you want to animate. After that, edit the properties with setState or any other method that causes a rebuild. Flutter’s animation framework handles interpolation and seamless transitions automatically.

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  double _containerWidth = 100.0;
  bool _isExpanded = false;

  void _toggleContainerSize() {
    setState(() {
      _containerWidth = _isExpanded ? 100.0 : 200.0;
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleContainerSize,
      child: AnimatedContainer(
        duration: Duration(milliseconds: 600),
        width: _containerWidth,
        height: 100.0,
        color: Colors.blue,
      ),
    );
  }
}

Customizing animation durations and curves

The AnimatedContainer introduces two additional properties: duration and curve. These properties control the duration of the animation and the curve of the animation respectively

The duration parameter allows you to determine how long the animation will run. You can also change the animation’s easing curve by adjusting the curve parameter, which allows for smooth, linear, or bespoke animation effects.

AnimatedContainer(
  duration: Duration(milliseconds: 600),
  curve: Curves.easeInOut,
  width: _containerWidth,
  height: 100.0,
  color: Colors.blue,
)

You can easily build compelling UI animations in Flutter with the AnimatedContainer widget. It’s an excellent tool for both new and seasoned developers to give a special touch to their products.