I want to navigate with bottom navigation bar - flutter

Question

I have flutter app and in my app I have to show bottom navigatiobar for every page
I am confuse that should I can navigate with with bottom navigation bar or I have to add bottom navigation bar for every page
If I use Navigation I have to use scaffold as parent of all widget so is it any way to navigate with scaffold.
Here is my code:-
class WorkerHomeScreen extends StatelessWidget {
WorkerHomeScreen({Key? key}) : super(key: key);
int _selectedPageIndex = 0;
List<Map<String, dynamic>> get _pages {
return [
{"page": SignInScreen(), "name": "PROPERTY", "action": null},
{
"page": ChoseRoleScreen(),
"name": "CHAT",
"action": ["Search"]
},
{"page": LandingPage(), "name": "VIDEO", "action": null},
{"page": EmployerSignUpScreen(), "name": "PROFILE", "action": null}
];
}
void _selectPage(int index) {
_selectedPageIndex = index;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
),
body: _pages[_selectedPageIndex]["page"],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: _selectPage,
currentIndex: _selectedPageIndex,
items: [
BottomNavigationBarItem(
icon: Icon(workerNavigationLists[0].icon),
label: "Property",
activeIcon: Icon(workerNavigationLists[0].icon),
),
BottomNavigationBarItem(
icon: Icon(workerNavigationLists[1].icon),
label: "Chat",
activeIcon: Icon(workerNavigationLists[0].icon),
),
BottomNavigationBarItem(
icon: Icon(workerNavigationLists[0].icon),
label: "Video",
),
BottomNavigationBarItem(
icon: Icon(workerNavigationLists[0].icon),
label: "Profile",
activeIcon: Icon(workerNavigationLists[0].icon),
),
],
),
);
}
}
Here is my screen:-
class SignInMobile extends StatelessWidget {
SignInMobile({Key? key}) : super(key: key);
final SignInController signInController = Get.find();
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: RaisedButton(
onPressed: () {
/// I want to navigate to other page but I want navigation bar in other page also
},
child: Text("TAP TO NAVIGATE"),
),
),
);
}
}

Answer 1

So from the Discussion I have Create an example
Check this link below for demo:
https://github.com/sagaracharya24/bottomApp.git
So in order to make this implementation you have have a knowledge of following things
OnGenerate Route mechanism.
GlobalKeys and NavigatorState.
Know how Offstage widget works under the hood.
What you will get from the Example:
Each Page maintains the stack of pages as per BottomBarItem.
If you are deep inside the nested pages and click in the same item, it will remove all the pages and com back to the main page.
I have also add the sample Gif To show you the app is working.
Let me know the if it works for you thanks.

Answer 2

You can use persistent_bottom_nav_bar to achieve your expectation. Do as follows:
late PersistentTabController _controller;
#override
void initState() {
super.initState();
_controller = PersistentTabController(initialIndex: 0);
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Image.asset('assets/logowhite.png', height: 30, width: 30),
inactiveIcon:
Image.asset('assets/logowhite.png', height: 30, width: 30),
title: "Vesvusa",
textStyle: const TextStyle(color: Colors.white),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/dashboard',
routes: {
'/newsevents': (context) => NewsListScreen(
menuScreenContext: context,
hideMainAppBar: hideMainAppBar,
itemCount: null),
'/blogdetails': (context) => BlogDetails(
menuScreenContext: context,
hideMainAppBar: hideMainAppBar,
),
'/videoslist': (context) => VideosList(menuScreenContext: context),
'/bookings': (context) => Bookings(menuScreenContext: context),
'/lookstheme': (context) => LooksTheme(menuScreenContext: context),
'/catalog': (context) => Catalog(menuScreenContext: context),
'/productdetails': (context) =>
ProductDetails(menuScreenContext: context),
},
),
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/search.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/search.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Search"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
routeAndNavigatorSettings: const RouteAndNavigatorSettings(
initialRoute: '/search',
routes: {
// '/first': (context) => MainScreen2(),
// '/second': (context) => MainScreen3(),
},
),
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/favourite.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/favourite.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Favorite"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
textStyle: const TextStyle(color: Colors.white),
routeAndNavigatorSettings: const RouteAndNavigatorSettings(
initialRoute: '/favorite',
routes: {
// '/first': (context) => MainScreen2(),
// '/second': (context) => MainScreen3(),
},
),
// onPressed: (context) {
// pushDynamicScreen(context,
// screen: SampleModalScreen(), withNavBar: true);
// }
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/cart.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/cart.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Cart"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
textStyle: const TextStyle(color: Colors.white),
routeAndNavigatorSettings: const RouteAndNavigatorSettings(
initialRoute: '/cart',
routes: {
// '/first': (context) => MainScreen2(),
// '/second': (context) => MainScreen3(),
},
),
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/profile.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/profile.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Profile"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
textStyle: const TextStyle(color: Colors.white),
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/profile',
routes: {
'/orders': (context) => MyOrders(
menuScreenContext: context,
),
'/loginsecurity': (context) => LoginSecurity(
menuScreenContext: context,
),
'/payment': (context) => Payment(
menuScreenContext: context,
),
'/message': (context) => Messages(
menuScreenContext: context,
),
'/devices': (context) => Devices(
menuScreenContext: context,
),
'/devices': (context) => Devices(
menuScreenContext: context,
),
'/inboxdetails': (context) => InboxDetails(
menuScreenContext: context,
),
'/loyalty': (context) => Loyalty(menuScreenContext: context),
},
),
),
];
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: MyTheme.themeColor,
appBar: AppBar(
elevation: 0,
iconTheme: IconThemeData(
color: MyTheme.grey,
),
centerTitle: true,
backgroundColor: MyTheme.themeColor,
title: Image.asset("assets/titles.png", height: 60, width: 100),
actions: [
Builder(
builder: (context) {
return InkWell(
onTap: () {
Scaffold.of(context).openEndDrawer();
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
child: Icon(Icons.notifications_none_outlined,
color: MyTheme.grey),
));
},
)
],
),
drawer: MyDrawer(),
endDrawer: const NotificationDrawer(),
body: PersistentTabView(
context,
controller: _controller,
screens: _buildScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: MyTheme.themeColor,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
stateManagement: true,
hideNavigationBarWhenKeyboardShows: true,
margin: const EdgeInsets.all(0.0),
popActionScreens: PopActionScreensType.once,
bottomScreenMargin: 0.0,
onWillPop: (context) async {
await showDialog(
context: context!,
useSafeArea: false,
builder: (context) => CommonAlert());
return false;
},
selectedTabScreenContext: (context) {
context = context;
},
hideNavigationBar: _hideNavBar,
popAllScreensOnTapOfSelectedTab: true,
itemAnimationProperties: const ItemAnimationProperties(
duration: Duration(milliseconds: 200),
curve: Curves.ease,
),
screenTransitionAnimation: const ScreenTransitionAnimation(
animateTabTransition: true,
curve: Curves.ease,
duration: Duration(milliseconds: 200),
),
navBarStyle:
NavBarStyle.style7, // Choose the nav bar style with this property
),
);
}
You can navigate to other page doing this
pushNewScreen(context,
screen: Loyalty(
menuScreenContext: context,
),pageTransitionAnimation:PageTransitionAnimation.scale);
},

Answer 3

You don't need to add BottomNavigationBar in all pages if you define it in your HomePage (Your first page) only.

Answer 4

if you dont want to use any packages in order to maintain the appsize or reduce it, please use the inbuilt flutter bottom navigation
import 'package:flutter/material.dart';
class Mynavigation extends StatefulWidget {
const Mynavigation({Key key}) : super(key: key);
#override
State<Mynavigation> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<Mynavigation> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
List<Widget> _widgetOptions = <Widget>[
Home(),Business(),School(), Settings()
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.red,
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
backgroundColor: Colors.green,
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
backgroundColor: Colors.purple,
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
backgroundColor: Colors.pink,
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
you do notice this line having
Home(),Business(),School(), Settings(),
those should be individual pages where you want to navigate to.SO PLEASE change them to point to the pages you want to use.
and then one more thing just replace Mynavigation with WorkerHomeScreen and you are good to go,
if your using flutter sdk >2.12.0
please use on this line
static const List<Widget> _widgetOptions = <Widget>[
else if your sdk is below 2.12.0 then use
List<Widget> _widgetOptions = <Widget>[
incase of any question, I will be waiting
Good luck bro

Answer 5

You can simply add BottomNevigatioBar using scaffold property and add multiple Page to the List. Hope you got your solution
import 'package:flutter/material.dart';
import 'package:traveling/helpers/AppColors.dart';
import 'package:traveling/screens/Employee/home/Home.dart';
import 'package:traveling/screens/Employee/profile/Profile.dart';
import 'package:traveling/screens/Employee/setting/Setting.dart';
class EmployeeBottomNavBar extends StatefulWidget {
const EmployeeBottomNavBar({Key? key}) : super(key: key);
#override
_EmployeeBottomNavBarState createState() => _EmployeeBottomNavBarState();
}
class _EmployeeBottomNavBarState extends State<EmployeeBottomNavBar> {
int pageIndex = 0;
bool visible = true;
List<Widget> pageList = <Widget>[EmployeeHome(), Profile(leadingIcon: false,), Setting()];
#override
Widget build(BuildContext context) {
return Scaffold(
body: pageList[pageIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.redAccent[400],
currentIndex: pageIndex,
onTap: (value) {
setState(() {
pageIndex = value;
});
},
// type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff2161c0),
),
child: Icon(
Icons.home,
color: AppColors.white,
),
),
icon: Icon(
Icons.home,
color: Color(0xff2161c0),
),
label: ""),
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff2161c0),
),
child: Icon(
Icons.person,
color: AppColors.white,
),
),
icon: Icon(
Icons.person,
color: AppColors.baseLightBlueColor,
),
label: ""),
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.baseLightBlueColor,
),
child: Icon(
Icons.settings,
color: AppColors.white,
),
),
icon: Icon(
Icons.settings,
color: AppColors.baseLightBlueColor,
),
label: ""),
]
)
);
}
}