Animations
In this lesson, we’re going to learn about animations!
Flutter offers some well-designed APIs that make it easy to implement complex animations and make your apps stand out.
The Flutter team made some extensive video tutorials, articles and samples that you can browse.
You can learn all about Flutter animations here:
I recommend you watch every one of the linked tutorials, as they explain everything in detail. Various codelabs are also available, so you can get some practice working with animations and learn what’s possible.
There’s also a section about other resources, pointing to additional samples, recipes and documentation you can browse.
If you want to know what Flutter’s animation system is capable of, I recommend this talk:
But there is more.
Animation Packages
The community has come up with some great animation packages. Here are my favourites:
- flutter_animate: easily add almost any kind of animated effect in Flutter (used to build the Wonderous app)
- SpinKit: a collection of animated loading indicators (here’s a showcase)
- animations: pre-canned animations for commonly-desired effects
- Funvas: create canvas-based animations based on time and math functions (web demo)
- Simple Animations: easily implement custom animations for common use cases.
- Staggered Animations: easily add staggered animations to your
ListView,GridView,ColumnandRowchildren - Spring: a collection of 12 widgets based on spring animation effects.
And if you want to go beyond writing your animations with code, you can use the Rive app. This is a complete editor that you can use to create sophisticated interactions. These can then be loaded into your Flutter projects using the rive package.
Flutter Animations Course
If you’re serious about animations and want to learn how to use them in a real-world app, you can also check out my course:
This will teach you how to build a habit-tracking application with completely custom UI and animations. It includes 7 hours of in-depth content, full source code, extra challenges & much more.
Daily Challenge - Animation Tutorials
Your daily challenge is to complete these official tutorials and codelabs about animations:
Happy coding!