Navigating Navigation Bar - flutter

Question

So I'm working on project with flutter. First I want to know if using a bottom Navigation Bar is better than creating a container for it. Now my question, how do I navigate to a page by using this bottom Navigation bar? Like should I build an entire page and bottom navigation bar for each one? OR Can I build everything in one place ?
This a part of it
void main() => runApp(MyApp());
class ProfilePage extends StatefulWidget {
#override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('HOME'),
centerTitle: true,
backgroundColor: Colors.green[900],
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [],
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.green[900],
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
label: 'Home',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.calendar_today,
),
label: 'Days',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.local_activity,
),
label: 'Activity',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
),
label: 'Settings',
backgroundColor: Colors.green[900],
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.white,
onTap: _onItemTapped,
),
),
);
}
}
This is how it looks but don't know how to navigate between screens.

Answer 1

you PageView class for change pages
Change Column to Pageview
final PageController controller = PageController();
return PageView(
/// [PageView.scrollDirection] defaults to [Axis.horizontal].
/// Use [Axis.vertical] to scroll vertically.`enter code here`
controller: controller,
children: const <Widget>[
Center(
child: Text('First Page'),
),
Center(
child: Text('Second Page'),
),
Center(
child: Text('Third Page'),
)
],
);
}
change in your method
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
controller.jumpToPage(index);
});
}

Answer 2

You don't need to create a BnB for each screen, you can create a navbar on the main screen
and in the build method return the corresponding page, based on the selected index.