I’m trying to make this bottom nav bar in flutter now am having a challenge. I’ve created a mainpage.dart where I’ve put the appbar and the bottom navigation bar codes. The screen for the tabs are put in the screens folder. This is my code for the bottom navbar
Padding(
padding: const EdgeInsets.only(top: 0.0, bottom: 30, left: 50, right:50),
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0), // Rounded corners for all sides
child: BottomNavigationBar(
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
elevation: 0.0,
showSelectedLabels: false, // Hide labels for selected tab
showUnselectedLabels: false, // Hide labels for unselected tabs
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite, ),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '', // Empty label
),
],
),
),
),
So the idea here is to make the bottom navigation bar to float on top of the tab screens so that if you’re on the home tab the content can be scrolled behind the bottom navbar like in this photo below the amber color is representing the content.
But every time I call the body:pages[_currentIndex] the bottom navigation bar seems to be having a white background, or the color matching with the scaffold of the MainPage(). It’s creating like it’s on container
class MainMenu extends StatefulWidget {
const MainMenu({super.key});
static const String id = "landingpage";
@override
State<MainMenu> createState() => _MainMenuState();
}
class _MainMenuState extends State<MainMenu> {
GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
int _currentIndex = 0;
// Define your pages/screens
final List<Widget> screens = [
FavoritePage(),
HomePage(),
ListingsPage(),
ProfilePage(),
];
bool drawerCanOpen = true;
final kDrawerItemStyle = TextStyle(
fontSize: 16,
);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(top: 0.0, bottom: 30, left: 50, right:50), // Add padding to the entire bottom navigation bar
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0), // Rounded corners for all sides
child: BottomNavigationBar(
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
elevation: 0.0,
showSelectedLabels: false, // Hide labels for selected tab
showUnselectedLabels: false, // Hide labels for unselected tabs
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite, ),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '', // Empty label
),
],
),
),
),
key: scaffoldKey,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
_currentIndex <= 0
? SliverAppBar(
foregroundColor: Color.fromARGB(255, 12, 3, 3),
title: Row(children: [
// Image.asset(
// 'assets/logo1.png',
// height: 40,
// width: 40,
// ),
// Text('glacier'),
]
),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundColor: Color.fromARGB(255, 255, 255, 255),
radius: 20,
child: IconButton(
icon: FaIcon(FontAwesomeIcons.bars),
onPressed: () {
if (drawerCanOpen) {
scaffoldKey.currentState?.openDrawer();
} else {
setState(() {
drawerCanOpen = true;
});
}
},
color: Colors.black87,
),
),
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 18, 255, 0),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 5.0,
spreadRadius: 0.5,
offset: Offset(
0.7,
0.7,
),
),
],
),
child: Badge(
backgroundColor: Colors.red,
padding: const EdgeInsets.all(7),
textStyle: const TextStyle(fontSize: 10.0),
largeSize: 20.0,
label: const Text('1'),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 20,
child: IconButton(
icon: FaIcon(FontAwesomeIcons.bagShopping),
onPressed: () {
Get.to(() => const CartPage(),
duration:
const Duration(milliseconds: 200),
transition: Transition.rightToLeft);
},
color: Colors.black87,
),
),
),
),
),
],
expandedHeight: 50,
scrolledUnderElevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
floating: false,
pinned: true,
elevation: innerBoxIsScrolled ? 4 : 0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
background: Container(
color: Colors.amber, // Set your desired background color here
),
),
)
: SliverToBoxAdapter(
child: SizedBox.shrink(),
),
];
},
body: screens[_currentIndex],
),
);
}
}
>Solution :
Set the extendBody property of Scaffold to true.
Scaffold(
extendBody: true,
// ...
)
From the documentation:
This property is often useful when the bottomNavigationBar has a non-rectangular shape, like CircularNotchedRectangle, which adds a FloatingActionButton sized notch to the top edge of the bar. In this case specifying
extendBody: trueensures that scaffold’s body will be visible through the bottom navigation bar’s notch.