Flutter Animations
Flutter Animations Master Class
Flutter Animations are damn Confusing 🤔. So many Types! Which to use? When to use? How to use it? Everything Explained 😌.
Note: If Reading Articles is not your Cup of Tea ️️️🍵, you can check it out in a more Visual & Eye — Pleasing format here.
This article is going to be the Simplest Flutter Animations Guide you would have ever read. So, be Ready !!!
One of the most Awesome Features of Flutter is its Easy and Slick Animations. There are Multiple Ways for adding Animations in Flutter, depending on its Type and Complexity. Pick whichever fits your case !!
1. AnimatedFoo Widgets
These are Animated Versions of Normal Widgets, like -
- AnimatedContainer
- AnimatedOpacity
- AnimatedCrossFade
They are called Implicit since they happen automatically on rebuilding the widget with a new property, for example by changing a value in setState()
2. Tween Animations
If any one of the AnimatedFoo widgets doesn’t suit you, make a Custom Implicit Widget !! Use a TweenAnimationBuilder, give it a Duration, a Tween & a Builder to use that Tween.
The word ‘Tween’ comes from ‘Between’ It goes from a start to an end value, producing all the values in between them.
3. FooTransition Widgets
The previous animations just tween from start to end. But, sometimes we need to “control” the animation. For this, use Explicit transition widgets, like SlideTransition. Give it a child & an Animation provided by the Controller. Now, we can play, pause & stop the animation as needed !!
4. Animated Builder
If none of the FooTransitions suits your need make a Custom Explicit Widget !! For this, extend your Class with SingleTickerProviderStateMixin. Initialize a Controller and add it to an AnimatedBuilder Now, simply use the controller’s value to drive the Animation !!
Note: If you want to further refactor the code, just subclass the AnimatedWidget Class.
5. Custom Third Party Animations
If your Animation is above the Capabilities for Flutter, you can use a Third Party Animating Software like Lottie or Rive to make your Animations, export them and add them to your Flutter App.
6. Other Animations
Apart from these, there are many Other Animations you can add to your app, for example -
- Hero Animations
- AnimatedSwitcher
- PageView transitions
- AnimatedList
- PageRouteBuilder transitions
- animations package (pub.dev)
- Staggered Animations
So these were all the Possible Options to Add Animations to your Flutter App. I hope you learned something new from me. Thanks for your Precious Time. See you in the next Article, signing off, FlutterFever.
FlutterFever is an Immersive Environment for High-Quality Flutter Tutorials, Resources, Tips & Tricks to Build, Deploy and Market Beautiful and Performant Flutter Apps Effortlessly. Find more about it here.
