Fixing a Mysterious BottomNavigationBar Overflow Error in Flutter
Last updated: June 2025
The Problem
When scaffolding out my new Flutter app "Decaf", I noticed a strange BOTTOM OVERFLOWED BY 2.0 PIXELS error occuring on my seemingly dead-simple implementation of a bottom navigation bar.
The key special thing I was doing: Trying to nest a BottomNavigationBar within a BottomAppBar.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 2.0 pixels on the bottom.
The relevant error-causing widget was:
BottomNavigationBar
BottomNavigationBar:file:///home/your-flutter-app/main.dart:49:16
To inspect this widget in Flutter DevTools, visit:
<some url here>
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering
with a yellow and
black striped pattern. This is usually caused by the contents being too big for
the RenderFlex.
Original Implementation
Here was my implementation that resulted in the BOTTOM OVERFLOWED BY 2.0 PIXELS:
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(index: _selectedIndex, children: _pages),
bottomNavigationBar: BottomAppBar(
child: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.analytics),
label: 'Analyze',
),
],
),
),
);
}
The Solution
Simply wrapping the BottomNavigationBar within the BottomAppBar with a Wrap widget did the trick! See the updated Scaffold here:
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(index: _selectedIndex, children: _pages),
bottomNavigationBar: BottomAppBar(
// Notice the new Wrap here!
child: Wrap(
children: [
BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.analytics),
label: 'Analyze',
),
],
),
],
),
),
);
}
And voila! The BottomAppBar / BottomNavigationBar no longer overflowing.
Bonus - Fixing the styling
Another hurdle with the nested BottomNavigationBar was the strange styling where the BottomNavigationBar seemlingly was popping-out, and was white rather than the correct background color of the app bar. You can see this in the image above.
Additionally, the ripple effect looked bad with the nesting, so that needed to be removed aswell.
Solving all this was quite easy, simply adding backgroundColor: Colors.transparent and elevation: 0 to the BottomNavigationBar.
For removing the ripple effect, I wrappen the BottomNavigationBar in a Theme widget, with a ThemeData that included a splashColor: Colors.transparent
Final Solution
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(index: _selectedIndex, children: _pages),
bottomNavigationBar: BottomAppBar(
// Added Wrap
child: Wrap(
children: [
// Added theme with transparent splashColor
Theme(
data: ThemeData(
splashColor: Colors.transparent,
),
child: BottomNavigationBar(
// Removed background color, and zeroed-out the elevation
backgroundColor: Colors.transparent,
elevation: 0,
currentIndex: _selectedIndex,
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.analytics),
label: 'Analyze',
),
],
),
),
],
),
),
);
}
I hope this guide helped you solve your issue! Happy Fluttering!