Flutter Animation Series Part 4: AnimatedContainer & AnimatedCrossFade

AnimatedContainer:- AnimatedContainer is a Flutter animation widget in which container's properties changes seamlessly within a given period of time.

Usage:

   AnimatedContainer(
        width:  Random().nextInt(300).toDouble(),
        height: Random().nextInt(300).toDouble(),
        decoration: BoxDecoration(
          color: Color.fromRGBO(
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextInt(256),
            1,
           ),
          borderRadius: BorderRadius.circular(
             Random().nextInt(100).toDouble(),
           ),
         ),
         duration: Duration(
           milliseconds: 800,
        ),
         curve: Curves.easeInOut,
      ),

Here, I’m randomly changing the properties of a Container with a specific curve. Checkout the code here.

When we wish to animate a container by changing its properties from one state to another, we can use an AnimatedContainer.

AnimatedContainer

AnimatedCrossFade:- AnimatedCrossFade is a Flutter animation widget in which we can kind of interchange between two widgets by cross-fading them.

Usage:

AnimatedCrossFade(
          crossFadeState: selected ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          duration: Duration(milliseconds: 2000),
          firstCurve: Curves.easeOut,
          secondCurve: Curves.easeIn,
          sizeCurve: Curves.bounceOut,
          firstChild: InkWell(
            splashColor: Colors.transparent,
            onTap: selected
                ? null
                : () {
                    setState(() {
                      selected = !selected;
                    });
                  },
            child: _firstWidget(),
          ),
          secondChild: _secondWidget(),
        ),

Here, I’m cross-fading from _firstWidget to _secondWidget on the click of the _firstWidget. As you seen in the demo below ‘Add to cart’ is _firstWidget and ‘Checkout to cart’ is _secondWidget. Checkout the code here.

AnimatedCrossFade

If you found this article useful, clap 👏 and share it because doing so will motivate me to write more.

Feel free to connect with me on social media platforms for any doubts regarding Flutter.

Ashutosh Singh