Search code examples
flutternavigationbarbottomnavigationviewappbar

Multiple Navigation bars flutter


Can anyone give any insight into how to implement two Navigation bars (a custom Navigation bar embedded into the AppBar that is in a TabView of the bottom Navigation Bar)?

Ex: enter image description here


Solution

  • You could use bottom property of an appbar like below. And it would be nested inside a bottom tabbar you create.

      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              title: Text('you can put your search here'),
              bottom: Tabbar(
                tabs:<Widget>[
                       Text('tab1'),
                       Text('tab2')
                     ]
              )
            ),
            body: new TabBarView(
              controller: _tabController,
              children: <Widget>[
                Screen1(),
                Screen2(),
              ],
            ),
          ),
        );
      }