Flutter how to add margin or padding in BottomNavigationBar

Question

I am trying to make bottom navigation bar, but with padding left and right on the screen. Right now I wrap the BottomNavigationBar with container and add padding there. The problem is the BottomNavigationBar default background still wrap all the layer, so could we remove the background color there?

Goal

Current result

bottomNavigationBar: Container(
    margin: EdgeInsets.only(left: 16, right: 16),
    decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20)),
        ),
    child: BottomNavigationBar(
      backgroundColor: Colors.transparent,
      showUnselectedLabels: true,
      type: BottomNavigationBarType.fixed,
      elevation: 0,
      currentIndex: _currentIndex,
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home), title: Text('Home')),
        BottomNavigationBarItem(
            icon: Icon(Icons.local_activity), title: Text('Activity')),
        BottomNavigationBarItem(
            icon: Icon(Icons.inbox), title: Text('Inbox')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile')),
      ],
    ),
  ),

Edit: I have removed background color in scaffold and all theme, but when you have scrolled item, you could see there is still background there Remove Scafold bg

Edit 2: here the code for the activity

class App extends StatelessWidget {
  final List<Widget> _children = [
    Center(
      child: Container(
        height: 850,
        color: Colors.red,
      ),
    )
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: _children[0],
        bottomNavigationBar: Container(
          margin: EdgeInsets.only(left: 16, right: 16),
          decoration: BoxDecoration(
            color: Colors.amber,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(200), topRight: Radius.circular(200)),
          ),
          child: BottomNavigationBar(
            backgroundColor: Colors.transparent,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            elevation: 0,
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home), title: Text('Home')),
              BottomNavigationBarItem(
                  icon: Icon(Icons.local_activity), title: Text('Activity')),
              BottomNavigationBarItem(
                  icon: Icon(Icons.inbox), title: Text('Inbox')),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person), title: Text('Profile')),
            ],
          ),
        ),
      ),
    );
  }
}

result

Answer 1

You need to put the Body and the BottomNavigationBar under a Stack so that the BottomNavigationBar can be placed on top of the main body content.

Your complete code will be:

import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Widget> _children = [
      Center(
        child: Container(
          height: 850, // use 'MediaQuery.of(context).size.height' to fit the screen height,
          color: Colors.red,
        ),
      )
    ];

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Stack(
            children: <Widget>[
              _children[0],
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: bottomNavigationBar(),
              ),
            ],
          ),
        ));
  }
}

Widget bottomNavigationBar() {
  return Container(
    margin: EdgeInsets.only(left: 16, right: 16),
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(200), topRight: Radius.circular(200)),
    ),
    child: BottomNavigationBar(
      backgroundColor: Colors.transparent,
      showUnselectedLabels: true,
      type: BottomNavigationBarType.fixed,
      elevation: 0,
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
        BottomNavigationBarItem(
            icon: Icon(Icons.local_activity), title: Text('Activity')),
        BottomNavigationBarItem(icon: Icon(Icons.inbox), title: Text('Inbox')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile')),
      ],
    ),
  );
}

Partial code from:

How to set border radius to bottom app bar in a flutter app?