Getting a white thick margin around the FloatingNavBar
mjarpitanand opened this issue · 5 comments
Same as #2
Doesn't work anymore since new versions of flutter, tryna find a new way
still having this issue
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'),
],
),
),
);
It may be due to elevation property as it fills all the background.