Hero小部件多次将其子小部件初始化

Question

Whenever, I have a Hero widget about a StatefulWidget , the State.initState method is called three times instead of once when navigating to that page.
This obviously only happens when the other page also has a Hero with the same tag.

class Page extends StatelessWidget {
  const Page({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(body: Hero(tag: 'tag', child: HeroContent()));
}

class HeroContent extends StatefulWidget {
  HeroContent({Key key}) : super(key: key);

  @override
  createState() => _HeroContentState();
}

class _HeroContentState extends State<HeroContent> {
  @override
  void initState() {
    print('_HeroContentState.initState'); // printed three times with `Hero` widget and once without
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Container();
}

Whenever I navigate to Page , _HeroContentState.initState is printed three times (and twice when popping a route).
Fully reproducible example of this as a gist on GitHub .
If I change the build method of Page , to look like this (removing the Hero widget):

@override
Widget build(BuildContext context) => Scaffold(body: HeroContent());

Now, _HeroContentState.initState is only called once as it should be.

How do I avoid Hero inserting my widget three times? How can I ensure that initState is only called once or have a different method that is only called once?

Answer 1

There is nothing you can do about that.

The way Hero works is that it moves in different locations in the widget tree in 3 steps:

1. the original location
2. inside Overlay, during the Hero transition
3. in the new page

Usually, for such issue, you'd use a GlobalKey , but that is not compatible with Hero .

As such, it is probably better to refactor your code such that initState doesn't matter.