Flutter: How to add a column widget inside a bottom navigation bar

Question

I've tried the following and got the out, but the body went blank. Is there any way to add a coloumn or a listview inside a bottom navigation bar

 Column(
    mainAxisAlignment:MainAxisAlignment.end,
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
              //button1
         ),
          Expanded(
              //button2
               ),
          Expanded(
             //button3)
      ),
      Row(
        children: <Widget>[
          Expanded(
            //button4
          ),
          Expanded(
            //button5)
        ],
      )
    ],
  ),

score 23 · Answer 1 · answered Nov 17 '20 at 13:25

23

Apart from the issue posed by Expanded widget (as pointed out in the answer by alexandreohara),
Column's mainAxisSize attribute is set to MainAxisSize.max by default. That means the column will try to occupy all the space available (the entire screen height).

Setting Column's mainAxisSize to MainAxisSize.min will wrap the Column widget to occupy the least possible space(vertically) and not span the entire screen.

Following is the way it can be done:

    Column(
        mainAxisSize: MainAxisSize.min, 
        children: [...]
    );

answered Nov 17 '20 at 13:25

Rishabh Bhatnagar

551
4
12

1

You saved my ~day~ live ! Thank you – Asad S Nov 19 '20 at 07:07
Thank you so much!! – Haritha Madhushanka Oct 14 '21 at 17:14
Krasava ty je est – eldar Oct 19 '21 at 06:29

score 1 · Answer 2 · answered Nov 23 '19 at 05:43

There's no problem using a Column in a BottomNavigationBar. I think that your problem is wrapping everything in Expanded. It doesn't know the width of the widgets inside, and because of that, it will return blank.

Try to remove those Expanded widgets and try this:

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween
   children: [FlatButton(...), FlatButton(...)],
)

Flutter: How to add a column widget inside a bottom navigation bar

2 Answers2