A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the appearance of the navigation bar with simple smooth animations, providing a nice and clean UI/UX.
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:
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:
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: