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.

Answer 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.