CODEWITHSUNDEEP
androidiosflutterdart
Helguera
Helguera

Reputation: 95

Extend Container behind bottom navigation flutter

I am trying to extend the white container behind the bottom navigation bar to the very end of the screen. Not just to the limit of the botton navigation bar (as you can see in the picture).

Any help or idea is really appreciated, I am quite new in Flutter. Thanks!

The structure of the app is:

bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 8.0,
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        IconButton(
          icon: Icon(
            Icons.show_chart,
          ),
          onPressed: () {},
        ),
        SizedBox(width: 48.0),
        IconButton(
          icon: Icon(
            Icons.filter_list,
          ),
          onPressed: () {},
        ),
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  body: Column(
    children: <Widget>[
      Expanded(
        child: Container(
        height: 100,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(40),
            topRight: Radius.circular(40)
          )
        ),
      ),
      )
    ],
  )

Upvotes: 7

Views: 10299

Answers (2)

alireza easazade
alireza easazade

Reputation: 3872

you can use "extendBody: true" inside "Scaffold" class

Scaffold(
    extendBody: true,
    body: _yourBody(),
    bottomNavigationBar: _yourBottomNavBar(),
)

Upvotes: 16

Crazy Lazy Cat
Crazy Lazy Cat

Reputation: 15073

Set backgroundColor value to Colors.white as well in Scaffold

Scaffold(
  backgroundColor: Colors.white,
  bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
      ....
      ....

Upvotes: -2

Related Questions