Animation In Flutter : AnimatedAlign

As a developer, animation becomes an important part of your app development workflow. To make your app memorable, you might want to create cool animations in your application.
Animation makes a huge difference in user engagement. It is a powerful tool for grabbing user's attention and making the app's UI more friendly to use.
Animation is the process of creating a visual illusion of motion, with the help of elements such as images or videos. It is such a wonderful technique that allows you to convey your message with emotion and feeling.
Animation is one of the integral parts that make Flutter such a powerful framework. It helps us to create apps that not only look fantastic but feel natural and seamless as well.
In this series, I'm going to explain different in-built animation widgets like AnimatedAlign, AnimatedContainer, AnimatedOpacity, AnimatedWidget, AnimatedModalBarrier, etc.
In this article, I've explained the AnimatedAlign widget. Which is used to animate the position.

AnimatedAlign

This is an animated version of the Align widget.
With this, you can animate the position of your widget in a given amount of duration.
You can animate through different alignments like left-right, top-bottom, center-left, etc.
To animate any widget's alignment simply wrap that widget inside the AnimatedAlign widget.

AnimatedAlign(
 child: Container(...)
)

After that provide the starting alignment and ending alignment to the alignment property of the AnimatedWidget.

AnimatedAlign(
 alignment: animatePosition ? resultAlignment : currentAlignment,
 child: Container(...)
)

Now give the duration to the duration property, which determines for how long the animation should run.

AnimatedAlign(
 alignment: alignment: animatePosition ? resultAlignment : currentAlignment,
 duration: const Duration(seconds: 1),
 child: Container(...)
)

You can also provide different curves to get different animation behavior.

AnimatedAlign(
 alignment: alignment: animatePosition ? resultAlignment : currentAlignment,
 duration: const Duration(seconds: 1),
 curve: Curves.fastOutSlowIn,
 child: Container(...)
)

And That's it!!. In the below example I've covered all the possible alignments.
https://gist.github.com/red-star25/27bf71cfe9df54b37e4420a64daa34a2
In the above example, I've taken one boolean named animatePosition, which is used to notify the AnimatedAlign widget that the user has clicked on the button to animate the position of the widget, So animate that widget's position from currentPosition to resultantPosition.
You can do more fun stuff with this, For example, you can use GestureDetector and then use the swipe gestures to move the box position towards the swiped direction. Like below,
https://gist.github.com/red-star25/f67bd4a8fcd7d21fe0bc999764ab0ac0
One more thing is, as you can see in the first example, As soon as I trigger other animation while the previous animation is still running, the previous animation stopped and continue its animation with a new animation value. How cool is that !!!
This is all about AnimatedAlign widget.

Thank you for reading. If you learned something, then make sure to share this knowledge with others.
Feedback and comments are welcomed ✍️
See you in the next article. Till then...

Animation In Flutter : AnimatedAlign

Comments

Animation In Flutter

Animation In Flutter: AnimatedList

More from this blog

100 Blogs Later: Lessons from Code, Content, and Consistency

A Practical Journey from Application to Distributed Systems - Part 6

A Practical Journey from Application to Distributed Systems - Part 5

A Practical Journey from Application to Distributed Systems - Part 4

A Practical Journey from Application to Distributed Systems - Part 3

AnimatedAlign

Command Palette

Comments

Animation In Flutter

Animation In Flutter: AnimatedList

More from this blog

AnimatedAlign