CODEWITHSUNDEEP
flutteruser-interfaceflutter-layout
litt
litt

Reputation: 168

How to remove the extra white space after applying Border Radius and Border to a container in Bottom Navigation bar?

white background after adding border radius and border

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 Colors.transparent, yet the result remained unchanged.

How can I remove that white color in the background?

class BottomNavigationbar extends StatefulWidget {
  @override
  _BottomNavigationbarState createState() => _BottomNavigationbarState();
}

class _BottomNavigationbarState extends State<BottomNavigationbar> {
  List<Widget> icons = [
    Icon(
      Icons.home,
      color: Colors.black,
    ),
    Icon(
      Icons.person,
      color: Colors.black,
    ),
    Icon(
      Icons.exit_to_app,
      color: Colors.black,
    )
  ];
  List<Widget> pages = List.generate(3, (index) => Foo("Page : ${index + 1}"));
  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) => 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),
    ));
  }
}

Upvotes: 1

Views: 2489

Answers (1)

Jigar Patel
Jigar Patel

Reputation: 5423

Set extendBody property of Scaffold to true and set the navigationBar Container color to white.

Scaffold(
  extendBody: true,
  //other code
)

and

BoxDecoration(
  color: Colors.white,
  border: Border.all(color: Color(0xFFF38B6FF), width: 2),
  //other code
)

Upvotes: 4

Related Questions