how to hide Bottom Navigation Bar on new screen in flutter?

user_8509590 0
Viewed 10992

Just like here when I click on the timer, the Bottom navigation bar was disappeared. I want to implement the same thing on flutter. Whenever I click on Bottom Navigation Bar Item, for the new screen the Bottom Navigation Bar should not appear.

Desired output

Here is my code. My Bottom Navigation Bar has four items and I want to hide the bottom navigation bar when I route to a new screen.

class MyFeedScreen extends StatefulWidget {
     @override
  _MyFeedScreenState createState() => _MyFeedScreenState();
}

class _MyFeedScreenState extends State<MyFeedScreen> {
  int _bottomNavIndex = 0;

  Widget pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return Category();
        }
      case 1:
        {
          return Feed();
        }
      case 3:
        {
          return Settings();
        }
    }
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: pageCaller(_bottomNavIndex),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: klogoBlue,
        selectedItemColor: Color(0xfff5f5f5),
        unselectedItemColor: Color(0xfff5f5f5),
        selectedFontSize: 12.0,
        type: BottomNavigationBarType.fixed,
        currentIndex: _bottomNavIndex,
        onTap: (index) {
          setState(() {
            _bottomNavIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(Icons.category),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('Category'),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(FontAwesomeIcons.newspaper),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('My Feed'),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(Icons.refresh),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('Refresh'),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(Icons.settings),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('Settings'),
            ),
          ),
        ],
      ),
    );
  }
}
flutter-layout flutter
2 Answers

You can try this method

    Navigator.of(context, rootNavigator: true).push(MaterialPageRoute(
              builder: (_) => NewScreen(),
            ),
          );
user_153365710

You can copy paste run full code below
You can check onTap index and do Navigator.push for specific button

code snippet

void _onItemTapped(int index) {

    if (index != 2) {
      setState(() {
        _bottomNavIndex = index;
      });

      print(_bottomNavIndex);
    } else {
      Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => Settings()),
      );
    }

  }

  Widget pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return Category();
        }
      case 1:
        {
          return Feed();
        }
    }
  }

working demo

enter image description here

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _bottomNavIndex = 0;

  void _onItemTapped(int index) {

    if (index != 2) {
      setState(() {
        _bottomNavIndex = index;
      });

      print(_bottomNavIndex);
    } else {
      Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => Settings()),
      );
    }

  }

  Widget pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return Category();
        }
      case 1:
        {
          return Feed();
        }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: pageCaller(_bottomNavIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Category'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Feed'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('Settings'),
          ),
        ],
        currentIndex: _bottomNavIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

class Category extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Category"),
      ),
    );
  }
}

class Feed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Feed"),
      ),
    );
  }
}

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: Center(
        child: Text("Settings"),
      ),
    );
  }
}
user_21795710
Related