I expected to see the FloatingActionButton in the middle of my bottom navigation bar. How to put the FloatingActionButton at the bottom of the screen and explain why it's now at the top of the screen?
class _BTMState extends State<BTM> {
int currentIndex = 0;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
bottomNavigationBar: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: Colors.white,
activeColor: Colors.blue,
inactiveColor: const Color.fromARGB(228, 159, 203, 240),
iconSize: 40,
height: 70,
border: const Border(
top: BorderSide(width: 1, color: Colors.grey),
bottom: BorderSide(width: 16, color: Colors.blue)),
currentIndex: 0,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: '',
),
],
),
tabBuilder: (context, index) {
switch (index) {
case 0:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: Categories(),
);
});
case 1:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: FavPage(),
);
});
default:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: HomePage(),
);
});
}
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {
onTabTapped(0);
},
tooltip: "Message",
elevation: 4.0,
backgroundColor: Colors.blue,
child: const Icon(Icons.shopping_cart, color: Colors.white),
),
),
);
}
void onTabTapped(int index) {
setState(() {
currentIndex = index;
});
}
}
Instead of using bottomNavigationBar
you can use body
of the Scaffold
.
child: Scaffold(
body: CupertinoTabScaffold(
tabBuilder: (context, index)