Flutter how to load new screen by tap on navigation bar - flutter

Question

I have created a custom bottom navigation bar for my app but I messed up my code. Right now its just shifting screen by true false value. I want to load screen but what I done is simple showing screen in body by bool.
My code
bottomNavigationBar: CustomBottomNavigationBar(
iconList: [
'images/ichome.png',
'images/icservice.png',
'images/icstore.png',
'images/Component 7 – 1#2x.png',
],
iconList2: [
'images/ichomeactive.png',
'images/icserviceactive.png',
'images/icstoreactive.png',
'images/icaccount.png',
],
onChange: (val) {
setState(() {
_selectedItem = val;
print(val);
if (val == 0) {
setState(() {
home = true;
service = false;
shop = false;
account = false;
});
}
if (val == 1) {
home = false;
service = true;
shop = false;
account = false;
}
if (val == 2) {
home = false;
service = false;
shop = true;
account = false;
}
if (val == 3) {
home = false;
service = false;
shop = false;
account = true;
}
});
},
defaultSelectedIndex: 0,
),
You can see on click I am changing bool value and in body show my widget. I know its wrong I do very stupid thing. That's why I need to know how I can load the page instead of just show and hide ? Also I need to show the navigation bar also on each page.

Answer 1

Please refer below code of Navigation bar
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: SettingView(),
);
}
}
class SettingView extends StatefulWidget {
#override
_SettingViewState createState() => _SettingViewState();
}
class _SettingViewState extends State<SettingView> {
final tabs = [DashboardView(), NotificationView(), ProfileView()];
int _currentIndex = 0;
#override
void initState() {
setState(() {});
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 40.0,
elevation: 0,
centerTitle: true,
backgroundColor: Colors.blue,
title: Text("Navigation Bar"),
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue,
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.white.withOpacity(0.5),
items: [
BottomNavigationBarItem(
icon: InkResponse(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Container(
padding: EdgeInsets.only(
left: 10,
),
child: Icon(
Icons.dashboard,
),
),
),
title: Padding(padding: EdgeInsets.zero),
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(
icon: Container(
padding: EdgeInsets.only(
right: 10,
),
child: Icon(Icons.notifications),
),
title: Padding(padding: EdgeInsets.zero),
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(
icon: Container(
padding: EdgeInsets.only(
right: 10,
),
child: Icon(Icons.account_box),
),
title: Padding(padding: EdgeInsets.zero),
backgroundColor: Colors.blue,
)
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
body: tabs[_currentIndex],
);
}
}
/*Dashboard*/
class DashboardView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("Dashboard"),
),
);
}
}
/*Notification*/
class NotificationView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("Notification"),
),
);
}
}
/*Profile*/
class ProfileView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("Profile"),
),
);
}
}

Answer 2

You can do something like that:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'app name',
home: HomeScreen(),
routes: <String, WidgetBuilder>{
'/route1': (BuildContext context) => FirstScreen(),
'/route2': (BuildContext context) => SecondScreen(),
},
);
}
Create reusable navigation bar Widget and for selected content just tell navigator where it needs to bring you:
Navigator.pushNamed(context, '/route1');