`A RenderFlex overflowed by 24 pixels on the bottom.`
Opened this issue · 3 comments
yamadade commented
Hello. Thanks for the nice package.
I ran the sample but I get an error, how can I solve this?
return Scaffold(
appBar: AppBar(
title: Text('Example'),
),
//If you want to show body behind the navbar, it should be true
extendBody: true,
bottomNavigationBar: FloatingNavbar(
onTap: (int val) {
//returns tab id which is user tapped
},
currentIndex: 0,
items: [
FloatingNavbarItem(icon: Icons.home, title: 'Home'),
FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
],
),
);
ontu001 commented
I faced the same issue then finally sort out a solution,
just make the margin and padding 0 within the FloatingNavbar
bottomNavigationBar: FloatingNavbar(
margin: EdgeInsets.all(0),
padding: EdgeInsets.all(0),
currentIndex: _currentIndex,
onTap: (int value){
_currentIndex = value;
setState(() {
});
},
items: [
FloatingNavbarItem( icon: Icons.home, title: 'Home'),
FloatingNavbarItem(icon: Icons.search, title: 'Search'),
],
),
kaifcoder commented
else we can do like this also
bottomNavigationBar: Container(
height: 150,
child: FloatingNavbar(
onTap: (int val) {
//returns tab id which is user tapped
},
currentIndex: 0,
borderRadius: 50,
itemBorderRadius: 50,
items: [
FloatingNavbarItem(icon: Icons.home, title: 'Home',
),
FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
],
),
),
acordovb commented
I have fixed the issue with the excess pixels in the Flutter widget. This solution maintains a good design for the widget and no longer shows the error. Here's the code:
FloatingNavbar(
margin: const EdgeInsets.all(0),
padding: const EdgeInsets.only(bottom: 4, top: 4),
onTap: (int val) => setState(() => _index = val),
currentIndex: _index,
items: [
FloatingNavbarItem(icon: Icons.home, title: 'Home'),
FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
],
)
Let me know if there are any improvements or further adjustments needed!