CODEWITHSUNDEEP
dartflutter
DanT29
DanT29

Reputation: 3229

Doing a full page route from bottom navigation bar in Flutter

I have a bottom navigation bar implemented, when clicking on the icons the body of the scaffold is rebuilt. But when my 3rd icon(index = 2) is pressed I want a full page route so the bottom navigation bar isn't shown as well. I have some code that works, but there isn't a back button to pop the stack (since it wasn't pushed into the stack). How can I do a full page navigation with a back button for just one of the indices on the bottom navigation bar?

Code:

class MainApp extends StatefulWidget {

  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {

  var _pages = [

    Page1(),
    Page2(),
    SpecialPage(),
    Page3(),
    Page4(),

  ];

  int _currentIndex = 0;

  onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {


    return _currentIndex == 2 ?  SpecialPage(): Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: [

          BottomNavigationBarItem(icon: Icon(Icons.library_books), title: Text('')),
          BottomNavigationBarItem(icon: Icon(Icons.notifications), title: Text('')),
          BottomNavigationBarItem(icon: Icon(Icons.add_circle_outline), title: Text('')),
          BottomNavigationBarItem(icon: Icon(Icons.mail), title: Text('')),
          BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('')),

        ],
        onTap: onTabTapped,
        currentIndex: _currentIndex,
      ),
    );
  }
}

Upvotes: 2

Views: 3044

Answers (1)

blaneyneil
blaneyneil

Reputation: 3232

don't use bottomNavigationBar but rather a Stack on the body.

body: Stack(
  children: <Widget>[

      // whatever your main screen content is

      Positioned(
        bottom: 0.0,
        left: 0.0,
        right: 0.0,
        child: MyCustomNav(),
      ),

  ]
)

then you can just make a row of five items that do whatever you want.

Upvotes: 3

Related Questions