Animating Widgets in Flutter Grids
Part II: tab transitions using AnimatedPositioned
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 the previous article, we explored transitioning between different pages using the Hero widget. However, what if you need to switch between tabs instead of pages, like this:
In this scenario, the Hero widget won’t do the trick because it’s triggered by page push and pop actions, not tab changes.
To achieve the desired animated transition between tabs, we’ll need to animate each widget individually to its new position and size. The simplest way to accomplish this is by utilizing the AnimatedPositioned widget:
