Getting a white thick margin around the FloatingNavBar

[mjarpitanand]

Same as #2

[right7ctrl]

Doesn't work anymore since new versions of flutter, tryna find a new way

[AliEasy]

still having this issue

[cbonello]

It looks like setting Scaffold.extendBody to true is not enough. You also have to manually add a MediaQuery widget whose bottom padding matches the height of the bottomNavigationBar above the scaffold's body. This works for me:

final MediaQueryData queryData = MediaQuery.of(context);

return MaterialApp( title: 'Floating NavBar Example', home: Scaffold( appBar: AppBar( title: Text('Floating NavBar Example'), centerTitle: true, ), extendBody: true, body: MediaQuery( data: queryData.copyWith( size: Size( queryData.size.width, queryData.size.height + queryData.padding.bottom, ), ), child: Center(child: Text("index: $_index"),), ), bottomNavigationBar: FloatingNavbar( 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'), ], ), ), );

[prateekmedia]

It may be due to elevation property as it fills all the background.

[GitGud31]

Having the same issue.

From the DevTools, it seems that this Padding is what's causing it