Flutter navigation to TabNav page from other page

Question

I have a bottomNavigation Bar with a TabBarview as below:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      //drawer: _drawer,
      appBar: new AppBar(automaticallyImplyLeading: false,
          title: new Text(_choice.title), actions: getAppBarActions(context)),
      bottomNavigationBar: new Material(
          color: CupertinoColors.lightBackgroundGray,
          //color: c,
          child: new Container(
            height: 50.0,
            child: new TabBar(
              controller: controller,
              //labelColor: Colors.grey,
              tabs: mytablist,
              labelStyle: new TextStyle(fontSize: 10.0),
              labelColor: CupertinoColors.activeBlue,
              unselectedLabelColor: CupertinoColors.inactiveGray,
              isScrollable: true,
              indicatorWeight: 1.0,
              indicatorColor: CupertinoColors.activeBlue,
              //indicatorPadding: new EdgeInsets.only(bottom: 5.0),
            ),
          )),
      body: new TabBarView(
        controller: controller,
        children: _tabWidgets(),
      ),
    );
  }

I have of courses pages that are navigated to, I also navigate to pages off the tabbarview that do not have the bottomnavigation, however I want to be able to navigate to one of the pages within the bottomnav, but when I do using something like this:

Navigator.of(context)..pushReplacementNamed(Chat.ChatServerPage.routeName);

It goes to the page but without the appbar or the bottomnavigationbar, anyone know how to accomplish this? I have tried all that I could find. Any help would be appreciated.

Have you tried wrapping the widget referenced by the route return a new Scaffold? A simple way to `DRY` is to make an a parent widget that takes that returns a new Scaffold with the TabBarView and AppBar. — Linus Juhlin, Mar 25 '18 at 03:13
The page referenced in the route does return a new Scaffold, but if I also tell it to have an appbar and tababr, then when it is called normally through the tabnav then it has 2 appbars and 2 bottom navigation tabnav's because it normally already gets it from the material app — Robert, Mar 25 '18 at 18:38

German Saprykin · Answer 1 · 2018-03-25T14:37:38.150

0

Check your widgets hierarchy. Usually MaterialApp widget is top level and it contains Navigator widget. That's why "navigation" replaces entire screen.

You could use different ways to implement this:

Each page has it's own Scaffold with AppBar and NavBar. Related question
It's possible to have multiple navigators. And separate Navigator could be added in Scaffold body. Related question

edited Mar 25 '18 at 14:37

answered Mar 25 '18 at 04:13

German Saprykin

6,631
2
29
26

Flutter navigation to TabNav page from other page

1 Answers1