Animating Widgets in Flutter Grids

Part I: Page transitions using the hero widget

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 are the same, some aren’t. How can you animate this so that the existing widgets move and resize within the grid?

That’s the subject of this series. We will explore three ways to do this (knowing Flutter, there are probably 100 more 😆)

1. Using Hero between pages (this article)
2. Using AnimatedPositioned in a Stack (next week’s article)
3. Using Flow widget (here)

Our screens:

No hero :(

It works fine, but it’s lacking… that extra something. Ideally, we want each image to move to its corresponding new location, resizing as it goes.

And Flutter has a simple, easy built-in solution for this: it’s called the Hero widget.