remove space between bottom nav bar and bottom of screen - flutter

Question

I created my own bottom app bar following a tutorial. However, there is a white space between the bottom nav bar and the bottom of the screen. I colored this space in white to show it. How can I make my container the actual nav bar and hide that space?
This is happening on all of my screens in the app regardless if they begin with a scaffold, column, container etc.
import 'package:flutter/material.dart';
class bottomAppBar extends StatelessWidget {
const bottomAppBar({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return BottomAppBar(
color: Colors.white,
child: Container(
color: Color(0xFF313131).withOpacity(0.7),
height: 50,
width: double.maxFinite,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/');
},
icon: Icon(
Icons.home,
color: Colors.white,
),
),
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/discover');
},
icon: Icon(
Icons.search,
color: Colors.white,
),
),
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/mybookings');
},
icon: Icon(
Icons.hello,
color: Colors.white,
),
),
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/user');
},
icon: Icon(
Icons.person,
color: Colors.white,
),
),
],
),
),
);
}
}

Answer 1

This happens because you use the scaffold propery from the materail app. But, never wrap the widget with the scaffold widget.
After wraping the widget in scaffold use the bottomNavigationBar property to put your BottomAppBar. Then every thing will work perfect.
Thank you.
Code (Your updated code)
import 'package:flutter/material.dart';
class bottomAppBar extends StatelessWidget {
const bottomAppBar({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomAppBar(
color: Colors.white,
child: Container(
color: Color(0xFF313131).withOpacity(0.7),
height: 50,
width: double.maxFinite,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/');
},
icon: Icon(
Icons.home,
color: Colors.white,
),
),
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/discover');
},
icon: Icon(
Icons.search,
color: Colors.white,
),
),
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/mybookings');
},
icon: Icon(
Icons.ac_unit,
color: Colors.white,
),
),
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/user');
},
icon: Icon(
Icons.person,
color: Colors.white,
),
),
],
),
),
),
);
}
}
Output Screen