Issue
I am building an app that has multiple pages. The problem is that I have a lot of Hero() widgets that I would like to animate between pages. I tried using the animation package’s PageTransitionSwitcher but Hero() widgets don’t animate with that. I have a wrapper at the root of my tree below the MaterialApp() and I route to either a log in screen, verification screen, and a home screen. The problem is if I route on the home screen it will replace the wrapper so I have resorted to having the home screen be an empty container that pushes a route above it which are the actual home screens, each having a bottomNavigationBar() that pushes a replacement to change screens with a fade animation while Hero()s animate.
The problem is that this approach is quite janky and I ran into a lot of problems because I have to have an empty widget that pushes a route then pop all routes in the wrapper when the auth state of the user changes. I was wondering if there is a better way to do this or a way to get route animations without actually routing the user.
Thanks for the help!
Edit: The current approach I had didn’t work as it would randomly pop the pages when the user would update their profile. I have temporarily reverted back to the PageTransitionSwitcher() but I would like to know how I can use the navigator or use the Navigator’s animation with my current setup.
Solution
This can be done by nesting Navigators. returning a Navigator() in the home page and adding a HeroController() (see more here Hero Animation not working inside nested Navigator) should do what I was trying to achieve.
You will also need to give the navigator a key and assign a navigatorKey in the Material App and route using keyName.currentState!.push() for example.
Answered By – Hady
Answer Checked By – Mildred Charles (FlutterFixes Admin)