How to remove persistent bottom navigation bar from some specific routes?

Question

I wanted to have persistent bottom navigation bar across my whole app so after searching for couple of hours I found a solution. I was inspired from this blog post and wrote my solution code Flutter — navigating off the charts

import 'package:flutter/material.dart';
import './login/login.dart';
import './alerts/alerts.dart';
import './home/home.dart';
import './Theme.dart';
import './settings/settings.dart';
import './enroll/enroll.dart';
import './add_device/add_device.dart';
import './eachDevice/index.dart';
import './device_settings/device_settings.dart';
import 'splash_screen/splash_screen.dart';
import './geofences/geofence_list.dart';
import './geofences/draw_geofence.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import './home/second_navigation_bar.dart';
import 'dart:io';
import 'package:path/path.dart';
void main() {
  GlobalKey<NavigatorState> navigator = new GlobalKey<NavigatorState>();
  HttpOverrides.global = new AppHttpOverrides();
  Map<String, WidgetBuilder> _routes = <String, WidgetBuilder>{
    "/alerts": (BuildContext context) => new Alerts(),
    "/login": (BuildContext context) => new LoginPage(),
    "/settings": (BuildContext context) => new Settings(),
    "/enroll": (BuildContext context) => new Enroll(),
    "/add_device": (BuildContext context) => new AddDevice(),
    "/history": (BuildContext context) => new History(),
    "/home": (BuildContext context) => new Home(),
    "/device_settings": (BuildContext context) => new DeviceSettings(),
    "/geofence_list": (BuildContext context) => new GeofenceList(),
    "/draw_geofence": (BuildContext context) => new DrawGeofence(),
  };

  runApp(new MaterialApp(
    navigatorKey: navigator,
    home: new SplashScreen(),
    builder: (context, child) {
      return new Scaffold(
          body: child,
          bottomNavigationBar:myBottomNavigationBar(),
          resizeToAvoidBottomPadding: false
      );
    },
    theme: buildTheme(),
    routes: _routes,
  ));
}

This code works perfectly and I have static bottom navigation bar in all app pages however I want to exclude bottom navigation bar in some routes like login page how can I exclude bottom navigation bar for some specific pages with this approach.

Answer 1

Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => new LoginActivity()));

Answer 2

Take a variable bool isBottomNavBarToBeShown . You can use some kind of function for the body in Scaffold like

  _getScreen(route) {
    switch (route) {
      case 'route1':
        return Route1();
        break;

      case 'route2':
        return Route2();
        break;

      default:
        break;
    }
  }

but in your case, you have to change

  "/login": (BuildContext context) => new LoginPage(),

to

      "/login": (BuildContext context) { 
               return new LoginPage();
              },

now just set

    setState(() {
      isBottomNavBarToBeShown=false;
    });

eg

case 'route1':
setState(() {
      isBottomNavBarToBeShown=false;
    });
return Route1();
break;

in your case

    "/login": (BuildContext context) { 
               setState(() {
               isBottomNavBarToBeShown=false;
               });
               return new LoginPage();
             },

so in your Scaffold

bottomNavigationBar:myBottomNavigationBar(), just use bottomNavigationBar:isBottomNavBarToBeShown ? myBottomNavigationBar() : null, bottomNavigationBar:isBottomNavBarToBeShown ? myBottomNavigationBar() : null,

First, create a Stateful screen first and add this in Scaffold . So you can access setState

Please update on this, if it works for you.

Answer 3

I solved it by adding an instance constructor to my main state widget.

class MyAppState extends State<MyApp> {
  var _currentIndex = 0;

  static MyAppState instance = new MyAppState._();
  MyAppState._();

  // (Excluded Build and page routes)

  Widget buildBottomNavigationBar(context) =>
      BottomNavigationBar(
        items: [
          _buildBottomNavigationBarItem("A", Icons.add),
          _buildBottomNavigationBarItem("B", Icons.remove),
        ],
        onTap: onTabTapped,
        currentIndex: _currentIndex,
      );

  _buildBottomNavigationBarItem(name, icon) =>
      BottomNavigationBarItem(icon: Icon(icon), title: Text(name));

  //Routing for BottomNavigationBar
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
      // Navigate ...
    });
  }
}

Then you can declare bottomNavigationBar in any screen you want by adding this line to the desired Scaffold.

bottomNavigationBar: MyAppState.instance.buildBottomNavigationBar(context)

Answer 4

Declare variable for bottomNavigationBar content like as

var navContent;

Create method for the exclude your bottomNavigationBar

excludeBottomNavigationBar(){
    return Container(
      height: 0.0,
    );
  } 

Now, you need to assign the bottomNavigationBar content according your requirement, exclude bottomNavigationBar for the login page

import 'package:flutter/material.dart';
  import './login/login.dart';
  import './alerts/alerts.dart';
  import './home/home.dart';
  import './Theme.dart';
  import './settings/settings.dart';
  import './enroll/enroll.dart';
  import './add_device/add_device.dart';
  import './eachDevice/index.dart';
  import './device_settings/device_settings.dart';
  import 'splash_screen/splash_screen.dart';
  import './geofences/geofence_list.dart';
  import './geofences/draw_geofence.dart';
  import 'package:firebase_messaging/firebase_messaging.dart';
  import './home/second_navigation_bar.dart';
  import 'dart:io';
  import 'package:path/path.dart';
  void main() {
    GlobalKey<NavigatorState> navigator = new GlobalKey<NavigatorState>();
    HttpOverrides.global = new AppHttpOverrides();
    var navContent;

    excludeBottomNavigationBar(){
      return Container(
        height: 0.0,
      );
    }

    Map<String, WidgetBuilder> _routes = <String, WidgetBuilder>{
      "/alerts": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Alerts();
      },
      "/login": (BuildContext context){
        navContent = excludeBottomNavigationBar();
        new LoginPage();
      },
      "/settings": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Settings();
      },
      "/enroll": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Enroll();
      },
      "/add_device": (BuildContext context){
        navContent = myBottomNavigationBar();
        new AddDevice();
      },
      "/history": (BuildContext context){
        navContent = myBottomNavigationBar();
        new History();
      },
      "/home": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Home();
      },
      "/device_settings": (BuildContext context){
        navContent = myBottomNavigationBar();
        new DeviceSettings()
      },
      "/geofence_list": (BuildContext context){
        navContent = myBottomNavigationBar();
        new GeofenceList()
      },
      "/draw_geofence": (BuildContext context){
        navContent = myBottomNavigationBar();
        new DrawGeofence()
      },
    };

    runApp(new MaterialApp(
      navigatorKey: navigator,
      home: new SplashScreen(),
      builder: (context, child) {
        return new Scaffold(
            body: child,
            bottomNavigationBar:navContent,
            resizeToAvoidBottomPadding: false
        );
      },
      theme: buildTheme(),
      routes: _routes,
    ));
  }