Grid Animations in Flutter

Example illustrating the use of Hero, AnimatedPositioned and Flow widgets to animate transition of widgets in a grid.

Sometimes, you need to transition between two different kinds of grids in your app. For example, you have a grid of images and the user wants to see only the user’s favorites. Some widgets may stay the same, while others change. How can you animate this transition, making existing widgets smoothly move and resize within the grid?

In depth step by step explanations in Medium

Files

In lib folder:

• none shows hte two grids without animation
• hero shows how to animate the transition using the Hero widget
• animated shows how to animate the transition using AnimatedPositioned widget
• flow shows how to animate the transition using the Flow widget
• widgets has the item shown in all grids
• main.dart is a page showing buttons to go to each option.

Issues

If you found a bug, please open an issue

Contribute

Do you have other cool animation options? Feel free to submit a pull request