`A RenderFlex overflowed by 24 pixels on the bottom.`

[yamadade]

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]

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]

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]

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!