How can i remove blank space under the bottom app bar? - flutter

Question

class HomeView extends GetView<HomeController> {
#override
final HomeController controller = Get.put(HomeController());
buildNavBar() {
return Obx(
() => BottomAppBar(
shape: const CircularNotchedRectangle(),
color: MyColorStyle.primary,
notchMargin: 4,
clipBehavior: Clip.antiAlias,
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
iconSize: 30.0,
showSelectedLabels: false,
showUnselectedLabels: false,
selectedItemColor: MyColorStyle.primary,
unselectedItemColor: Colors.grey[600],
onTap: controller.changeTabIndex,
currentIndex: controller.tabIndex.value,
backgroundColor: Colors.white,
items: const [
BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: ''),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), label: ''),
BottomNavigationBarItem(icon: Icon(Icons.show_chart), label: ''),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: ''),
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
extendBody: true,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: MyColorStyle.primary,
elevation: 2,
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) => ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(40), topRight: Radius.circular(40)),
child: SizedBox(
height: Get.height * 0.8,
child: Container(),
),
),
);
},
child: const Icon(Icons.add),
),
bottomNavigationBar: buildNavBar(),
body: Obx(
() => IndexedStack(
index: controller.tabIndex.value,
children: [
SizedBox(),
SizedBox(),
SizedBox(),
SizedBox(),
],
),
),
);
}
}
image here(blue space)
I tried solving it with SafeArea. I can't remove the space at the bottom. None of the methods have achieved the solution I wanted.
When I made a BottomNavBar like this a while ago, there was no auto-space for the home indicator. For this, I couldn't reach a property in Scaffold or anywhere else.

Answer 1

That is the gesture system navigation bar, which depends on the user's phone settings. You cannot remove but you can change the color. In the main method, before calling runApp(),
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
systemNavigationBarColor: appWhite,
systemNavigationBarDividerColor: appWhite,
systemNavigationBarIconBrightness: Brightness.dark));
runApp(const App());
}

Answer 2

I couldn't remove the space at the bottom, but I wrapped my Scaffold with SafeArea. I made the color of the space the same as my page by wrapping the SafeArea in the Container and giving the Container a white color. Sayfamın başlangıcı bu şekilde oldu.
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: SafeArea(
child: Scaffold(