Above Hero #

Русская версия

A package that allows limited control over the z-index of the Hero widget by placing page elements above it during page transitions.

Preview: #

without above_hero	with above_hero

Online demo: https://thela.space/above_hero

Usage #

Simply wrap the widgets that should be displayed above the Hero in AboveHero:

Stack(
  children: <Widget>[
    Hero(tag: "myHero", child: MyHeroContent()),
    Positioned(
      top: 16,
      left: 16,
      child: AboveHero(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: Icon(Icons.arrow_back),
        ),
      ),
    ),
  ],
)

How does it work? #

During the transition animation, both pages are located in the navigation overlay. Hero adds itself to this overlay at the very top.

above_hero... does the same.

1. Tracks the moment the transition animation starts
2. Waits for Hero to appear in the overlay
3. Moves its child widget to the top, replacing it with a placeholder.

In the overlay, AboveHero correctly positions the widget and applies the same transition animation to it that is applied to the screen.

Visually, everything looks as if the widget is still part of the screen.

After the animation is complete, AboveHero returns the widget to its rightful place on the page.

License #

This project is licensed under the MIT License - see the LICENSE file for details.