Introduction:

Flutter has lots of widgets with explicit animations but there are also widgets with implicit animations, Some good ones are _AnimatedContainer _and_ AnimatedSwitcher._

Animated Container

As the name itself implies that it’s a kind of ‘_container’ _which animate for you each time you rebuild it. Attributes of _AnimatedContainer _ are the same as that of _Container _ except it has one extra attribute ‘duration’, it provides a seamless way of transitioning to the changed value.

You can build it once with particular attributes, like color, height. And when you rebuild it with different values, in response to _setState _ call. _AnimatedContainer _ will perform a linear seamless animation to changed value. and its more than just color, height you can animate the borders, border radii, background images, shadows, gradient, and shape, etc.

class SlideUpContainer extends StatefulWidget {
  @override
  _SlideUpContainerState createState() => _SlideUpContainerState();
}

class _SlideUpContainerState extends State<SlideUpContainer> {
  
  double containerHeight = 150;
  double containerWidth = 150;
  
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GestureDetector(
          onTap: () {
            setState((){
              containerHeight = containerHeight == 150 ? 250 : 150;
              containerWidth = containerWidth == 150 ? 250 : 150;
            });
          },
          child: AnimatedContainer(
            color: Colors.blue,
            height: containerHeight,
            width: containerWidth,
            duration: Duration(milliseconds: 600),
          ),
      );
  }
}

In the above code, we have used Stateful Widget to witness the changes made during interpolation between two values. So when we will click the container we can see the animation.

#animation #flutter #flutter-widget