How do I add a bottomNavigationBar on one screen, but not others? - flutter

Question

I have 3 screens for my app: an enter screen, login, and the main screen. I want the nav bar only to be on the main screen. Which widget should I return in my HomeScreen() page or what should I have in my main.dart page?
Here is the code for the main.dart:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Doctor Consultation App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: Colors.white,
visualDensity: VisualDensity.adaptivePlatformDensity),
home: EnterScreen(),
);
}
}
home_screen.dart:
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
);
}
}
bottom_nav_bar.dart:
class BottomNavScreen extends StatefulWidget {
#override
_BottomNavScreenState createState() => _BottomNavScreenState();
}
class _BottomNavScreenState extends State<BottomNavScreen> {
final List _screens = [
MainScreen(),
Scaffold(),
Scaffold(),
Scaffold(),
];
int _currentIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: _screens[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) => setState(() => _currentIndex = index),
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.white,
showSelectedLabels: false,
showUnselectedLabels: false,
selectedItemColor: Palette.primaryRed,
unselectedItemColor: Colors.grey,
elevation: 0.0,
items: [
Icons.home,
Icons.chat_bubble,
Icons.calendar_today,
Icons.person
]
.asMap()
.map((key, value) => MapEntry(
key,
BottomNavigationBarItem(
title: Text(''),
icon: Container(
padding: const EdgeInsets.symmetric(
vertical: 6.0, horizontal: 16.0),
decoration: BoxDecoration(
color: _currentIndex == key
? Palette.primaryRed
: Colors.transparent,
borderRadius: BorderRadius.circular(20.0)),
child: Icon(value)))))
.values
.toList()),
);
}
}
I have already tried doing bottomNavigationBar: BottomNavScreen(), on the home_screen.dart, but I get a ton of errors from the MaterialApp widget.

Answer 1

Change the build of the ButtomNavScreen to this:
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: _currentIndex,
...
And change the build of the MainScreen to something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavScreen(),
body: SafeArea(
child: Center(
child: Container(
width: 200,
height: 100,
color: Colors.redAccent,
child: Center(child: Text("sample text")),
),
)
),
);
}