Keep Hero widget on top of PageView pages in Flutter?

Question

I want to have a Hero widget displayed on top of pages in a PageView, so that when I scroll through the pages, the Hero doesn't move at all.

This is the builder for my pages:

Widget _buildPage({color: Color, icon: Icon, text: String}) {
    return Container(
      padding: const EdgeInsets.only(top: 5.0),
      color: color,
      child: Column(
        children: [
          Expanded(
            flex: 3,
            child: Icon(icon)
          ),
          Expanded(
            flex: 2,
            child: Text(text),
          ),
          Expanded(
            flex: 1,
            child: Hero(
              tag: 'examplehero',
              child: Column(
                children: [
                  Text(...),
                  FlatButton(
                    child: Text(...),
                  ),
                ...

This is my PageView:

return PageView(
      children: [
        _buildPage(...),
        _buildPage(...),
        _buildPage(...),
        _buildPage(...),
      ],
    );

Currently, when I scroll through the pages, the hero widget acts like a regular widget, and is scrolled away with the page. How can I keep it always displayed?

Thanks in advance

you can extract your hero from your pageview and display your hero at the top and your page views below — diegoveloper, Aug 17 '18 at 13:48
@diegoveloper for some reason I didn't consider using a Stack. Thanks! — Rafael Uchoa, Aug 17 '18 at 14:22

score 0 · Answer 1 · answered Apr 03 '22 at 08:42

This is answered in this post on SO.

This packages does what you want https://pub.dev/packages/coast

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.

Keep Hero widget on top of PageView pages in Flutter?

1 Answers1