I made a custom bottomNavitationBar and named it BottomBar. and I used it home_page and shop_page as bottomNavigationBar in Scaffold well. but shop_page shows that well but home_page doesn't show that totally. It's there's no bucket in bottomNavigationBar in home_page.. I don't know why they appear like this. I attached the screens.
--home_page-- (problem that not showing bucket in bottomNavigationBar here.. please review these codes.)
return Scaffold(
bottomNavigationBar: BottomBar(),
backgroundColor: Color(0xFF001947),
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child:
Column(
children: [
Container(
width: double.infinity,
height: 140,
child: Center(
child: Text("32.06 AVAX", style: TextStyle(color: Colors.white, fontSize: 30),
)
),
),
Container(
width: double.infinity,
height: 50,
child: Center(
child: Text("Weekly Activation", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold))
),
),
Container(
width: double.infinity,
child: Divider(color: Colors.grey, thickness: 0.3)
),
Container(
child: LineChartSample2()
),
Flexible(
fit: FlexFit.loose,
child: Container(
width: double.infinity,
color: Colors.white,
child: Column(
children: [
Container(
width: double.infinity,
height: 30,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("My Identification",style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
ElevatedButton(onPressed: null,
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
),child: Icon(
Icons.arrow_right
),
)
]
)
),
Container(
child: SingleChildScrollView(
padding: EdgeInsets.only(top: 100),
scrollDirection: Axis.horizontal,
child: cardWidget()
),
),
]
),
),
),
],
)
),
]
)
)
--- Button Custom 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 BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
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,
),
],
),
),
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,
),
],
),
),
],
),
//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,
),
],
),
),
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,
),
],
),
),
],
),
],
),
),
);
}
}
