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