title: Flutter how to add margin or padding in BottomNavigationBar
body: <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/Tns5f.png" rel="noreferrer">Goal</a></p>
  
  <p><a href="https://i.stack.imgur.com/eO2lq.png" rel="noreferrer">Current result</a></p>
  
  <pre><code>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')),
        ],
      ),
    ),
  </code></pre>
  
  <p>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
  <a href="https://i.stack.imgur.com/KruE9.png" rel="noreferrer">Remove Scafold bg</a></p>
  
  <p>Edit 2: here the code for the activity</p>
  
  <pre><code>class App extends StatelessWidget {
    final List&lt;Widget&gt; _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')),
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MX7Yb.png" rel="noreferrer">result</a></p>