Flutter layout expanded trouble

Question

I trying this layout

• Card

  • Row

    • Expanded (flex: 4)

      • Image

    • Expanded (flex: 4)

      • Column (this is the important column)
        • row, row, row

Now I want use MainAxisAlignment.spaceBetween of Column I see that column has not height of the parent row. Because image's height is for example 200.0

The Expanded(4) widgets I have for split card to two sides because original image size is bigger. If I set manually height of parent ROW then working fine but I dont want set height manually.

If I try use another Expanded in Column, I have got exception.

One more litle question, what's different between Container and SizedBox ?

Thanks for help

edit: add code and screen

@override
  Widget build(BuildContext context) {
    return new Card(
      child: new Container(
        padding: new EdgeInsets.only(left: 5.0),
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[new Expanded(flex: 4, child: new Image.network(_tour.hotel.thumbnail)), new Expanded(flex: 4, child: _buildInfoColumn())],
        ),
      ),
    );
  }

  Widget _buildInfoColumn() {
    return new Container(
              padding: new EdgeInsets.only(left: 3.0),
              child: new Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween, //this is not working
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Text(_tour.hotel.name, style: new TextStyle(fontSize: 14.0, fontFamily: 'Lato')),
                      new Text(_tour.hotel.country + ', ' + _tour.hotel.locality, style: new TextStyle(fontSize: 12.0, fontFamily: 'Lato', color: Colors.grey))
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Container(
                        padding: new EdgeInsets.only(left: 5.0),
                        child: new Row(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            new Text(_tour.finalPrice.toString() + ',-', style: new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold, fontFamily: 'Lato', color: Colors.lightGreen)),
                            new Text(((_tour.discount > 0) ? '   ' + _tour.price.toString() + ',-' : ''), style: new TextStyle(fontSize: 12.0, fontFamily: 'Lato', color: Colors.red)),
                          ],
                        ),
                      ),
                      new Container(
                          padding: new EdgeInsets.all(2.0),
                          decoration: new BoxDecoration(color: Colors.red),
                          child: new Text(
                            '-' + _tour.discount.toString() + '%',
                            style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 11.0, fontFamily: 'Lato', color: Colors.white),
                          ))
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[_buildTransportIcon(), _buildDates()],
                      ),
                      new Container(
                          padding: new EdgeInsets.only(right: 5.0),
                          child: new Row(
                            children: ((_tour.hotel.stars != null)
                                ? new List.generate(
                                    _tour.hotel.stars,
                                    (i) => new Icon(
                                          Icons.star,
                                          color: Colors.orangeAccent,
                                          size: 13.0,
                                        ))
                                : []),
                          ))
                    ],
                  )
                ],
              )
    );

Answer 1

The reason why MainAxisAlignment.spaceBetween doesn't work is because the widget doesn't know the size that it'll divid evenly. You may want to consider setting a fixed height for the Card widget and just crop the image being displayed to fit in the widget.

As for your question regarding Container and SizedBox, it's best explained here.