Overflow Error with DotNavigationBar in BottomAppBar

[harsh522004]

Description

I encountered an overflow error when using the DotNavigationBar within a BottomAppBar in my Flutter application. The error occurred due to excessive padding and margin values causing the content to exceed the available space.

Steps to Reproduce

Use DotNavigationBar within a BottomAppBar.

Set the following properties:

• dotIndicatorColor
• marginR
• paddingR
• itemPadding

Error Message :

A RenderFlex overflowed by 40 pixels on the bottom.

Solution

The issue was resolved by adjusting the default padding and margin values. Here are the working configuration values:

marginR: const EdgeInsets.only(bottom: 0, right: 40, left: 40)
paddingR: const EdgeInsets.only(bottom: 1, top: 5)
itemPadding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10)

Example :
return Scaffold( extendBody: true, body: activePage(_selectedPageIndex), bottomNavigationBar: Padding( padding: const EdgeInsets.only(bottom: 50), child: DotNavigationBar( dotIndicatorColor: Colors.transparent, marginR: const EdgeInsets.only(bottom: 0, right: 40, left: 40), paddingR: const EdgeInsets.only(bottom: 1, top: 5), itemPadding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10), items: [ DotNavigationBarItem(icon: Icon(Icons.category)), DotNavigationBarItem(icon: Icon(Icons.add)), DotNavigationBarItem(icon: Icon(Icons.filter_list_alt)), ], currentIndex: _selectedPageIndex, onTap: _selectPage, ), ), );

Visual Reference
Here is an image of how the navigation bar appears with the adjusted values:

[efollette]

Also encountering this issue using a scaffold