Question 78592 in Flutter Question posted in
The official Flutter documentation can be found here.

Hide bottomnavigation in specific pages in flutter?

I created a separate file for bottom navigation bar and included the three screens which is to be included in bottom navigation bar .


class _bottomnavscreen extends State<bottomnavscreen> {
  int _selectedIndex = 0;

  List<Widget> pageList = [home(), create(), profile()];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_circle_outline_sharp),
            label: 'Create',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      body: pageList.elementAt(_selectedIndex),
    );
  }

I put this bottomnavscreen as the home in main.dart:



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    

      home: bottomnavscreen(),
    );
  }
}

But this bootomnavigation widget is seen in my detailedpost screen and comment screen.

  • detailedpost screen is pushed from home() through Navigation.push()
  • Comment screen is pushed from postdetails() through
    Navigation.push()

How can I hide this bottom navigation widget in my comment screen and detailedpost screen?

This is how I push to detailpost screen from home()

Navigator.push(
                               context,
                               MaterialPageRoute(
                                   builder: (context) => detailpost(
                                         body: document['body'],
                                         title: document['title'],
                                         date: document['date'],
                                       )),
                             );
Tags:

3

Answers


  1. 0

    You can add condition for specific index like this :

    class _bottomnavscreen extends State<bottomnavscreen> {
  int _selectedIndex = 0;

  List<Widget> pageList = [home(), create(), profile()];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _selectedIndex == 1 ? Container() : BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_circle_outline_sharp),
            label: 'Create',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      body: pageList.elementAt(_selectedIndex),
    );
  }
    Login or Signup to reply.
  2. 0

    You should start a base page from the MyApp and add BottomNavigations in that page only.
    Now when you navigate to detailedpost screen and comment screen, the BottomNavigations will not be visible.

    Login or Signup to reply.
  3. 0

    you can use the offstage property to hide the bottom navigation bar on specific pages by wrapping it in an Offstage widget and setting the offstage property to true:

    import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [    HomePage(),    SettingsPage(),  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: Offstage(
        offstage: _currentIndex == 1,
        child: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
    

),
  ),
);

    }
    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search