Reputation: 3524
How to make hero widget fly below appBar
and bottomBar
widgets in route transition.
I had tried to warp other widgets with hero also but no luck.
Upvotes: 2
Views: 1039
Reputation: 3386
During a transition, Flutter places the Hero's in the order they are found in the widget (element) tree; last one on top. So you might be able to organise your screen in such a way that, the app bar and bottom bar heros are found later in the tree than the body containing other heros. For example with a Stack
:
Stack(
children: [
Body(),
Positioned(
top: 0,
left: 0,
right: 0,
child: AppBar(),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: BottomBar(),
),
],
)
This relies on the implementation details of Flutter's heros, so it is rather hacky.
Another approach would be to copy Flutter's HeroController, Hero and related code and modify it to order the Hero OverlayEntries by a new "z-index" property of the Hero widget.
The Heros "fly" in the Navigator's Overlay. So yet another approach could be to place your app bar and bottom bar on top of the Navigator (for example with a Stack like above).
None of these are great of course.
Upvotes: 1