Flutter: How to disable Hero Animation when Widget out of screen in ListView

Question

I have a problem when I use HeroWidget in ListViews.

Here is use case: I have 2 pages. Page1 has a HeroWidget. Page2 has a ListView with HeroWidget at the beginning.

Clicking on Page1 HeroWidget will enter Page2, no problem.

The problem is that after I scroll the Listview in Page2 and let the HeroWidget jump off the screen. Then back from page2 to page1, it has a weird animation. (because the HeroWidget is not in the screen).

Can I disable this hero animation when the hero widget is not in the screen?

A workaround I have is to use visibility_detector (https://pub.dev/packages/visibility_detector) to disable hero when visibility is 0.

But this widget needs GlobaleKey, I have to add a lot of GlobaleKey to the listview, he makes me worry that it has performance issues

Answer 1

You can make use of the HeroMode widget - simply wrap your Hero widget with HeroMode and handle the enabled flag as required.

See related answer here: https://stackoverflow.com/a/74583048