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

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

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

Answer 4

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)