bottomNavigationBar using iPhone X

Question

I have an issue with a bottomNavigationBar, the issue happens only on iPhone X, as there appears some padding below the BNB as if it were inside a SafeArea widget (and its not)

Well, how can I remove that padding? or maybe color it somehow?

This is my code for the build function

  @override
  Widget build(BuildContext context) {
return new Scaffold(
  
  appBar: _buildAppBar(),
  drawer: _buildDrawer(),
  body: _isLoading
      ? Center(
          child: CircularProgressIndicator(),
        )
      : new Container(
        color: Colors.white,
        child: _unauthorizedOrders()),
  // floatingActionButton: FloatingActionButton(
  //   onPressed: () {},
  //   backgroundColor: primaryColor,
  //   child: Icon(Icons.flash_on, size: 30.0,),
  //   tooltip: 'Authorize Orders',
  // ),
  // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  backgroundColor: Colors.red,
  bottomNavigationBar: BottomAppBar(
      child: Container(
    height: 40.0,
    color: primaryColor,
    child: Row(
      children: <Widget>[
        // Padding(
        //   padding: const EdgeInsets.only(left: 10.0),
        //   child: Text(
        //     'Orders: ${orders.length}',
        //     style: TextStyle(
        //         color: Colors.white,
        //         fontSize: 18.0,
        //         fontWeight: FontWeight.bold),
        //   ),
        // ),
      ],
    ),
  )),
);
  }

EDIT: I have added the backgroundColor to the scaffold, removed the docked FAB and wrapped the body inside a container to paint it white, still doesn't work, I have updated the code above to show it

Answer 1

I had the same problem with this bottomAppBar.

I only erased the color attibute.

Hope it helps to someone.

BottomAppBar(
        elevation: 0.0,
        shape: widget.notchedShape,
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
              color: Colors.white),
          child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: items)
        ),
        color: Colors.teal[50]);

Answer 2

Use

SafeArea(
    child: BottomAppBar(...)
);

Answer 3

A work-around will be to set the backgroundColor of your Scaffold to the same color as your BottomNavigationBar and have your content in a container with the color that you want.

Edit:

Here is a Sample code:

import 'package:flutter/material.dart';

  void main() => runApp(new MyApp());

  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'BNB Demo on iPhone X',
        theme: new ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.black,
        ),
        home: new MyHomePage(title: 'BNB Demo on iPhone X'),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;

    @override
    _MyHomePageState createState() => new _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;

    void _incrementCounter() {
      setState(() {
        _counter++;
      });
    }

    @override
    Widget build(BuildContext context) {
      return new SafeArea(
        child: new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  'You have pushed the button this many times:',
                ),
                new Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add, color: Colors.white,),
            backgroundColor: Colors.black,
            onPressed: _incrementCounter,
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          bottomNavigationBar: new BottomAppBar(
            child: Container(
              height: 40.0,
              color: Colors.black,
            ),
          ),
        ),
      );
    }
  }