'Flutter - navigate back to specific tab on a page with Navigator.pop(context)

In my app, I have a homepage that has 5 tabs on the bottom. On each tabbed page, there is an app bar that has a '+' symbol as an action, which navigates you to a different page. The navigation with that '+' button to the new page is done with the following code, alongside the Flutter Platform Widgets package:

Navigator.of(context, rootNavigator: true)
    .push(
  platformPageRoute(
    context: context,
    builder: (context) => Page1(),
  ),
);

I use the platformPageRoute feature as an easy way to navigate with a native feel. Now, that works fine to navigate to a new page, but the issue comes when I use

Navigator.pop(context);

to navigate back to the original page. When I use that to navigate back to that original page, it pays no attention to the tab that was selected originally. For example, if I were originally on the second tab on the homepage and then use the '+' button on that tab and then finally use

Navigator.pop(context);

on that new page, it returns the first tab of the homepage. Is there any way of ensuring when I use the above command, it goes to the right tab? I have tried something along the lines of:

Navigator.popUntil(context, '/homepageTab2');

alongside a named route, to return to the correct tab on the homepage, although that returns a black screen. Why might that be? I have also tried using:

              Navigator.pushAndRemoveUntil(
                context,
                platformPageRoute(
                  context: context,
                  builder: (context) =>
                      HomePage(selectedPage: 1),
                ),
                (route) => false,
              );

This does not work either, since it returns the selected/correct page tab content, but with the first tab selected. In addition, the other 'problem' for me is that the animation is a 'push' one and that doesn't 'match' with the animation when I have more often used

Navigator.pop(context);

to navigate back to a screen. Is there a way to maybe use pushAndRemoveUntil but then change the animation to match a pop animation?

Thanks!

EDIT:

I have just noticed that with the situation I have described above, it is actually returning the correct screen content when I use Navigator.pop(context); but the tab in the tab bar at the bottom is showing as the first tab, in the second tab's position, essentially duplicating the first tab, until I navigate to a new tab and back, at which time it shows the correct tab in the correct position. I hope that makes sense!



Solution 1:[1]

Sub-pages of a TabBarView cannot be navigated using Navigator.

You can use TabController to go to your desired tab page after awaiting Navigator.push():

await Navigator.of(context, rootNavigator: true)
    .push(
  platformPageRoute(
    context: context,
    builder: (context) => Page1(),
  ),
);

tabController.animateTo(<index of tab>);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dustin Catap