how to solve that buttom navigation bar doesn't appear in flutter - flutter

Question

First,, Thanks for answering of questions about flutter in everytime.
As explaining the way this time, I tried to make that seperating button navigation bar as a widget in another file from main file and try to use it in main file like below. but it doesn't appear and not specific error.. so I don't get why is it not apper and how to use this in the way that I tried to? Could you give me some advice about this? Thanks a lot.
--main page I used--
return Scaffold(
bottomNavigationBar: BottomBar(),
--bottomNavigationBar widget page--
class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
#override
State<BottomBar> createState() => _BottomBarState();
}
class _BottomBarState extends State<BottomBar> {
int currentTab = 0;
final List<Widget> screens = [
HomePage(),
ShopPage(),
PeoplePage(),
WalletPage()
];
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = HomePage();
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = HomePage();
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.home,
color: currentTab == 0? Colors.blue : Colors.grey,
),
Text(
'Home',
style: TextStyle(
color: currentTab == 0? Colors.blue : Colors.grey,
),
)
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = ShopPage();
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.shop,
color: currentTab == 1? Colors.blue : Colors.grey,
),
Text(
'Shop',
style: TextStyle(
color: currentTab == 1? Colors.blue : Colors.grey,
),
)
],
),
),
],
),
//Right Tab Bar Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = WalletPage();
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.wallet,
color: currentTab == 2? Colors.blue : Colors.grey,
),
Text(
'Home',
style: TextStyle(
color: currentTab == 3? Colors.blue : Colors.grey,
),
)
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = PeoplePage();
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.people,
color: currentTab == 3? Colors.blue : Colors.grey,
),
Text(
'Shop',
style: TextStyle(
color: currentTab == 3? Colors.blue : Colors.grey,
),
)
],
),
),
],
),
],
),
),
),
);
}
}

Answer 1

It is likely due to the fact that your BottomBar class' build method contains a Scaffold and it should not. It should only return a BottomAppBar widget. You can move all of your FAB widget code to the outer scaffold in your Main Page class.