从 MaterialPageRoute 导航到另一个选项卡

Question

I expected this issue to have a simple solution but I didn't find yet any...

I have few tabs in my app, in one of them I open another screen using

  Navigator.push(context, MaterialPageRoute(...

Once user clicks on a button in that screen I want to pop it and navigate to another tab.

I tried to pass TabController to the relevant tab and its child screen, but this doesn't seem like the simplest solution, and also not easy to accomplish since the controller is not yet defined:

tabController = DefaultTabController(
          body: TabBarView(
            children: [
                 FirstTab(
                    tabController: tabController // <- tabController is not defined yet at this point:(

Is there any "global" function to reset the app's "entire" route so it will both pop MaterialPageRoute and navigate to specific tab?

Answer 1

You can use Navigator.of(context).pushReplacement

Answer 2

The solution I found is to call Navigator's push synchronously and check for its returned value. Then when I want to navigate to another tab I simply send true indication in Navigator's pop.

This is how my navigation method looks like, notice I had to add a short delay before navigating to another tab, not sure why, but it didn't work without it:

  _navigateToDetailsScreen() async {
      bool shouldNavigateToHomeTab = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailsScreen()),
           ));
      if (shouldNavigateToHomeTab) {
          Future.delayed(const Duration(milliseconds: 500), () {
             DefaultTabController.of(context)!.animateTo(0);
          });
      }
  }

And this is how I call pop:

Navigator.of(context).pop(true);

This looks like the simplest solution for me, and so far I didn't find any issues with it.