title: How to remove the extra white space after applying Border Radius and Border to a container in Bottom Navigation bar?
body: <p><a href="https://i.stack.imgur.com/zOb4Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zOb4Q.png" alt="white background after adding border radius and border" /></a></p>
  <p>I'm creating a Bottom Navigation Bar with Container. After applying Border Radius and Border to the container, there is this white color in the background which I'm trying to eliminate. I tried wrapping the outer Container with <code>Colors.transparent</code>, yet the result remained unchanged.</p>
  <p>How can I remove that white color in the background?</p>
  <pre><code>class BottomNavigationbar extends StatefulWidget {
    @override
    _BottomNavigationbarState createState() =&gt; _BottomNavigationbarState();
  }
  
  class _BottomNavigationbarState extends State&lt;BottomNavigationbar&gt; {
    List&lt;Widget&gt; icons = [
      Icon(
        Icons.home,
        color: Colors.black,
      ),
      Icon(
        Icons.person,
        color: Colors.black,
      ),
      Icon(
        Icons.exit_to_app,
        color: Colors.black,
      )
    ];
    List&lt;Widget&gt; pages = List.generate(3, (index) =&gt; Foo(&quot;Page : ${index + 1}&quot;));
    int currentIndex = 0;
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: icons.length,
        child: Scaffold(
            backgroundColor: Colors.transparent,
            bottomNavigationBar: Container(
              height: 55,
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Color(0xFFF38B6FF), width: 2),
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20)),
                    color: Colors.transparent),
                child: TabBar(
                  tabs: List.generate(
                      icons.length,
                      (int index) =&gt; Tab(
                            icon: icons[index],
                          )),
                ),
              ),
            ),
            body: TabBarView(
              children: [
                new Container(
                  color: Colors.yellow,
                ),
                new Container(
                  color: Colors.orange,
                ),
                new Container(
                  color: Colors.lightGreen,
                ),
              ],
            )),
      );
    }
  }
  
  class Foo extends StatelessWidget {
    final String text;
    Foo(this.text);
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Center(
        child: Text(text),
      ));
    }
  }
  </code></pre>