Flutter: How to animate between pages with BottomNavigationBar

Question

I'm building an app with multiple pages. There are going to be some common elements. I want to wrap them in Hero() widgets so that they animate from one screen to another.

The problem is that the bottom navigation bar cuts between widgets. The way I currently have it is that I have a Home() widget that has a Scaffold(). The scaffold has a body which returns a widget (different pages) and a BottomNavigationBar(). Is there a way I can make a route be inside of the home's body widget or to add a route animation to the bottom navigation bar or other solutions that could fix this problem?

I don't want to have to make each page have a bottom navigation bar of it's own and route between them and I'd prefer to have the bottom navigation bar inside of the parent widget. How can I achieve this?

Thanks for your help!

Answer 1

I fixed it by having to put a bottom navigation bar in each page. I made it simpler by making a widget for it that takes in the page index so that I can just code it once and just put the widget on each page and write it's index.