Flutter bottom navigation where one page has tabs

Question

I would like to create A scaffold with bottom navigation bar, and an app bar which always displays current page title. When I change bottom bar option, the content changes obviously. Everything this far is ok with classic NavigationBar structure. But the problem starts when on of the content pages should have tabs on top of them. I have my appbar created in parents Scaffold. Is there anyway to add tabs to parent widgets appBar ?

My AppBar + BottomNavBar page:

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }
}
class _MainPageState extends State<MainPage> {

  int _currentPageIndex;
  List<Widget> _pages = List();

  Widget _getCurrentPage() => _pages[_currentPageIndex];

  @override
  void initState() {
    setState(() {
      _currentPageIndex = 0;

      _pages.add(BlocProvider(bloc: AgendaBloc(), child: AgendaPage()));
      _pages.add(SpeakersPage());
      _pages.add(MenuPage());
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar( title: 'Agenda'),
      body: _getCurrentPage(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPageIndex,
        onTap: (index){
          setState(() {
            _currentPageIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.content_paste),
            title: Text('Agenda'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group),
            title: Text('Speakers'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.menu),
            title: Text('Menu'),
          ),
        ],
      ),
    );
  }
}

Now lets say that I want my AgendaPage widget to display tabs on top of view. Is there any easy, non-hacky way to do this ?

Desired effect:

Using tabs and bottom navigation together sounds like clunky UI. What is the purpose of this? — Abion47
I'm trying to achieve this, could it be possible for you to place your code solution? — elunap
I don't have access to this code right now. You basically do the stuff in Alexanders answer, and the "_getCurrentPage()" Method returns your widget which should be wrapped in Another Scaffold. But this time this Scaffold can include tabs made in standard way, that can be found in any tutorial. Feel free to ask, if you still have troubles with it. — user1321706

Alexander Ryzhov Alexander Ryzhov · Accepted Answer · 2019-02-12T23:51:56

You can use nested Scaffold widgets. This works in Flutter 1.1.8:

// This is the outer Scaffold. No AppBar here
Scaffold(
  // Workaround for https://github.com/flutter/flutter/issues/7036
  resizeToAvoidBottomPadding: false, 
  body: _getCurrentPage(),  // AppBar comes from the Scaffold of the current page 
  bottomNavigationBar: BottomNavigationBar(
    // ...
  )
)

Flutter bottom navigation where one page has tabs

2 Answers