Flutter Hero animations with PageView-like implementation

Question

Hi there everyone I have a question very similar to this: Flutter Hero-like transition in PageView

I think the difference is this question has a little more background.

We have a horizontal scrolling site with PageView and we want to animate the icon between both pages. Kind of like this: https://flutter.dev/docs/development/ui/animations/hero-animationsThing.

The thing is, most tutorials with HeroAnimations use

Navigator.of(context).push(MaterialPageRoute<void>(
          builder: (BuildContext context) {
            return 

Do you suggest we just rebuild the page so that it has this Navigator push? I think that would entail implementing gesture detectors to make it feel like a PageView and also custom transitions.

You can see our rough draft at https://teamcrushing.it

Page view just makes it so simple but perhaps we need to make our own PageView to get this functionality.

Solution 1

There’s a package on pub.dev named coast that provides hero-like animations for a page view.

It is essentially taking the same approach as Flutter’s Hero and HeroController: Detect when a transition is started, search through the element trees of the source and target pages for the widgets marked for animation (heroes, crabs), pair them up based on their tags, and finally create an entry in an Overlay whose position and size is the interpolation between those on the source and target pages.

Solution 2

In some cases, it might be more practical to switch to a pages structure, but incase you couldn't we can implement our own hero navigation animation. However it might not be as efficient as the hero animation, but in a nutshell to create such animation with the most basic functionality we will need to implement this, you will need 5 elements:

1. The initial global coordinates
2. The final global coordinates
3. The initial widget size
4. The final widget size
5. The widget you want to animate

Now in order to create this animation that spans the 2 screens we will need to use the overlay that is present in flutter. link

1. Add to the Overlay the widget that is to be animated (Not the widget present on the screen, a new instance).
2. Position this overlay entry to be in the starting coordinate of the animation (The original widget's position).
3. Hide the original widget.
4. Create an animation that changes the x and y coordinates to the create the custom motion, this can be any curve, the simplest being a simple tween between the starting coordinate and the end coordinate.
5. Another animation that animates size change between the start and end size. This animation can be combined with the previous one. (One tween animation but the values are calculated manually)
6. After the animation is done, remove the overlay entry, and show the new widget. (This can be done as a timed operation or as a call back operation)

This is the most flexible between all of the available options since you have access to the widget in all of its states. However you must be very careful when using this method as it might cause a slowdown if not properly implemented.