AnimatedAlign Widget

devprofile

AnimatedAlign Widget is used to move the child widget position from one place to another, as the name suggests, within a specified time duration.

Properties used in AnimatedAlign Widget

In AnimatedAlign Widget 2 properties are required (alignment & duration) which means I need to set these 2 properties and the rest are optional.

alignment

In this property, we need to set the alignment of the child widget. The value we are setting to alignment is Alignment.topRight and Alignment(0, 0)

AnimatedAlign(
          curve: Curves.ease,
          alignment: isSelected ? Alignment.topRight : Alignment(0, 0), // Here we added 
          duration: const Duration(milliseconds: 700),
          child: const Icon(
            Icons.star,
            size: 36,
            color: Colors.redAccent,
          ),
        )

duration

In this property, we need to set the animation duration to execute.

AnimatedAlign(
          curve: Curves.ease,
          alignment: isSelected ? Alignment.topRight : Alignment(0, 0),
          duration: const Duration(milliseconds: 700), // Here we added Duration
          child: const Icon(
            Icons.star,
            size: 36,
            color: Colors.redAccent,
          ),
        )

curve

In this property, we need to set animation types, like ease, easeIn, easeOut and many more.

AnimatedAlign(
          curve: Curves.ease, // Here we added Curves
          alignment: isSelected ? Alignment.topRight : Alignment(0, 0),
          duration: const Duration(milliseconds: 700),
          child: const Icon(
            Icons.star,
            size: 36,
            color: Colors.redAccent,
          ),
        )

Output:-

To understand more please check the code below:-

View this gist on GitHub

I hope this will help you to understand how to use AnimatedAlign Widget.

Thanks & Regards

Namaste 🙏🏻

Related Posts