Home > Enterprise >  Navigate to another tab from within MaterialPageRoute
Navigate to another tab from within MaterialPageRoute

Time:09-05

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 ?

CodePudding user response:

You can use Navigator.of(context).pushReplacement

CodePudding user response:

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.

  • Related