Flutter google_nav_bar package / overflow with 5 GButton

Question

I want to add 5 GButton to bottom navigation bar but its overflows,in the normal bottom nav bar i can fix this with "type: BottomNavigationBarType.fixed," but at this package i cant find a solution.

Can you help me?

bottomNavigationBar: GNav(
          selectedIndex: _selectedIndex,
          onTabChange: _onItemTapped,
          activeColor: Constants.appsMainColor,
          hoverColor: Colors.grey.shade300,
          gap: 5,
          tabs: const [
            GButton(
              icon: FontAwesomeIcons.house,
              text: 'Anasayfa',
            ),
            GButton(
              icon: Icons.category,
              text: 'Kategoriler',
            ),
            GButton(
              icon: FontAwesomeIcons.play,
              text: 'Video',
            ),
            GButton(
              icon: FontAwesomeIcons.bookmark,
              text: 'Kaydet',
            ),
            GButton(
              icon: FontAwesomeIcons.bars,
              text: 'Menü',
            )
          ],
        )[enter image description here](https://i.sstatic.net/bGPCO.png)

I want fix this not change any icon or text size image

Answer 1

Try playing around with GNav.padding. You could also change the padding of each button by setting GButton.padding.

GNav(
  ...
  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 24),
),