Flutter 201: Animations

The goal of this project is to explore Animations in Flutter, from basic overview of the concept to coding examples and tutorials that can help provide applied learning of those ideas.

References

Living document that I'll keep up-to-date, tracking useful articles and tutorials for learning animation best practices.

• Animations: Technical Overview / review core Flutter animation classes.
• Animation and Motion Widgets / review catalog of animation widgets.
• Tutorial: Animations in Flutter / walks through tween animations
• Zero to One With Flutter Pt 1 and Pt 2 / walk through animated chart creation
• Building Beautiful UI with Flutter / Step 7 shows animating a new message
• Stephen Grider Course on Udemy / Section 17 focuses on building delightful animations
• The Boring Show: Adding Animations To Your App with Emily Fortuna & Filip Hracek.
• Flutter Heroes and Villains by Norbert Kosir.
• Simple Milky Way Animation in Flutter showing basic hero animation
• Making a 3D Flip Animation in Flutter similar to the flight departures board "rolodex" effect.
• Flutter Login Animation from Geeky Ants, with nice screenshot timeline demonstrating animation per tick.
• Animations in Flutter recreates the 12 principles of UX in Motion
• Orchestrating Multiple Animations showcasing Staggered Animation with values for various effects (blur, curve etc.) on a profile page.
• Flutter Animations: The Basics from Sergi gives a good starting point
• Flutter By Example: Animations

Common Animation Patterns

In the Flutter Docs on Animations there are three kinds of common animation patterns listed:

• Animated List or Grid

  • animate the addition or deleteion of elements from a collection (list or grid)

• Shared Element Transition: where the same element occurs across screens (routes) and the animation is used to highlight the transition (e.g, going from a list view to a detail view)

• Staggered Animations: where the animation is really a set of smaller deferred transitions (or motion) that occur sequentially or overlap (partially or totally) on a timeline.

There are good examples (with code) to learn the patterns:

• AnimatedList example shows a list of cards synched with a List Model. As data is added or removed, the relevant cards and animated in or out of view. Example screenshot here.

• Hero Animation is an example of a Shared Element animation. The "hero" widget flies from one route (starting screen) to another route (ending screen). In standard hero animation it undergoes a change in size & location; in the radial hero animation it also undergoes a change in shape (square/circle)

• Staggered Animations Example shows an example with multiple Animation objects and a single AnimationController. See a demo video here.

Walkthroughs

Notes & insights from quick walkthroughs of codelabs, tutorials and documentation in a useful order.