CODEWITHSUNDEEP
dartfluttercross-platformflutter-layout
user1321706
user1321706

Reputation: 117

Flutter bottom navigation where one page has tabs

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: Tabs page

No Tabs page

Upvotes: 8

Views: 5472

Answers (2)

Alexander Ryzhov
Alexander Ryzhov

Reputation: 2920

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(
    // ...
  )
)

Upvotes: 4

Mazin Ibrahim
Mazin Ibrahim

Reputation: 7869

As far as I know you can't , but I managed to solve this problem by adding a separate AppBar to each page navigated through the bottomNavigationBar:

provide each of your _pages with a separate app bar, and remove the main one from your build method.

Upvotes: 1

Related Questions