title: Set the container as the child of the bottom nav bar but there is a space between the bottom of the screen and the nav bar now
body: <p><a href="https://i.stack.imgur.com/RhbTq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RhbTq.png" alt="enter image description here" /></a></p>
  <p>So 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 coloured this space in white to show it. How can i make my container the actual nav bar and hide that space?</p>
  <pre><code>
  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,
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>