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'],
                                       )),
                             );

CodePudding user response：

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),
    );
  }

CodePudding user response：

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.

CodePudding user response：

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'),
            ),
          ],
    

),
  ),
);

} }