How to move to different navigation tabs - flutter

Question

I am a beginner, just started learning flutter recently and i took a project as a challenge am stuck at this point. I have a separate widget file for my bottom navigator bar, and am using the bottom nav bar in my home screen. so how can i switch to different tabs to display different widgets. My code code below only display's home tab widget which is in the HomeScreen body. Assuming i want to display different widget for each tab how can i achieve that?
//Bottom Navbar widget
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:foodbyte/widgets/PopularFoodsWidget.dart';
class BottomNavBarWidget extends StatefulWidget {
#override
_BottomNavBarWidgetState createState() => _BottomNavBarWidgetState();
}
class _BottomNavBarWidgetState extends State<BottomNavBarWidget> {
int _currentIndex = 0;
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: _currentIndex,
selectedItemColor: Colors.lightBlue,
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'Home',
),
backgroundColor: Colors.blueAccent,
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text(
'Search',
),
backgroundColor: Colors.blueAccent,
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_basket),
title: Text(
'Orders',
),
backgroundColor: Colors.blueAccent,
),
BottomNavigationBarItem(
icon: Icon(FontAwesomeIcons.user),
title: Text(
'Account',
),
backgroundColor: Colors.blueAccent,
),
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
}
//HomeScreen
//This is my homescreen where am using the bottom nav bar widget
import 'package:flutter/material.dart';
import 'package:foodbyte/screens/categories.dart';
import 'package:foodbyte/widgets/top_menus.dart';
import 'package:foodbyte/widgets/BottomNavBarWidget.dart';
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFFFAFAFA),
elevation: 0,
title: Text(
"Welcome to my prototype app!",
style: TextStyle(
color: Color(0xFF3a3737),
fontSize: 16,
fontWeight: FontWeight.w500),
),
brightness: Brightness.light,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_none,
color: Color(0xFF3a3737),
),
onPressed: () {
// Navigator.push(context, ScaleRoute(page: SignInPage()));
})
],
),
// appBar: buildSearchBar(context),
body: Padding(
padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0),
child: ListView(
children: <Widget>[
buildCategoryRow('Bottom Nav', context),
SizedBox(height: 10.0),
TopMenus(),
],
),
),
bottomNavigationBar: BottomNavBarWidget(),
);
}
buildCategoryRow(String category, BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"$category",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w800,
),
),
FlatButton(
child: Text(
"See all (9)",
style: TextStyle(
color: Theme.of(context).accentColor,
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return Categories();
},
),
);
},
),
],
);
}
}

Answer 1

You can create list of screens or widgets as you like.
List _widgets[Widget1,Widget2,Widget3];
since you have _currentIndex, you can use it to show your desired screen in scafold body.
Scafold:...
body:_widgets[_currentIndex]

Answer 2

Your logic is wrong
you are using the bottom navigation bar on the home screen that is no a good way.
What you need is to use the Scaffold widget in the bottom nav bar class and pass the Indexed Stack widget to the body of its scaffold and use the children parameter of IndexStack and paste your Screens Names inside children widget.
and pass your bottom navigation bar widget to the bottom navigation bar parameter of this scaffold.