简体   繁体   中英

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

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)
        ],
      )
    ],
  ),

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: [...]
    );

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(...)],
)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM