title: Flutter - Alignment and Wrapping issues
body: <p>I'm trying to build a ListView, where the tiles look like this:
  <a href="https://i.stack.imgur.com/I5pde.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/I5pde.jpg" alt="enter image description here"></a></p>
  
  <p>However, I'm facing some issues here. 
  So the item layout is</p>
  
  <pre><code>@override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _onTap,
      child: new Card(
        elevation: 1.0,
        color: Colors.white,
        margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 15.0),
        child: new Container(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: &lt;Widget&gt;[
              new Container(
                margin: const EdgeInsets.only(right: 15.0),
                width: 100.0,
                height: 130.0,
                padding: const EdgeInsets.symmetric(
                    vertical: 10.0, horizontal: 5.0),
                decoration: new BoxDecoration(
                    shape: BoxShape.rectangle,
                    image: new DecorationImage(
                        fit: BoxFit.cover,
                        image: new NetworkImage(
                            "https://image.tmdb.org/t/p/w500" +
                                widget.movie.posterPath
                        )
                    )
                ),
              ),
              new Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: &lt;Widget&gt;[
                  new Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: &lt;Widget&gt;[
                      new Expanded(
                        flex: 0,
                        child: new Container(
                          margin: const EdgeInsets.only(
                              top: 12.0, bottom: 10.0),
                          child: new Text(widget.movie.title,
                            style: new TextStyle(
                              fontSize: 18.0,
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                      new Expanded(
                        flex: 0,
                        child: new Text(
                          widget.movie.voteAverage.toString(),
                          style: new TextStyle(
                              fontSize: 16.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[600]
                          ),
                        ),
                      ),
                    ],
                  ),
                  new Container(
                    child: new Text(widget.movie.overview,
                      softWrap: true,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 3,
                    ),
                  ),
                  new Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child: new Row(
                      children: &lt;Widget&gt;[
                        new Text("Released"),
                        new Container(
                            margin: const EdgeInsets.only(left: 5.0),
                            child: new Text(widget.movie.releaseDate)
                        ),
                      ],
                    ),
                  ),
                  new Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child: new Row(
                      children: &lt;Widget&gt;[
                        new Text("Rating"),
                        new Container(
                            margin: const EdgeInsets.only(left: 5.0),
                            child: new Text(widget.movie.voteAverage.toString())
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
  </code></pre>
  
  <p>The layout hierarchy, as you can see in the image above, is </p>
  
  <blockquote>
    <p>Row -> Image, Column -> (Row -> (Title, Rating)), Description, Text,
    Text</p>
  </blockquote>
  
  <ol>
  <li><p><strong>First Issue</strong></p>
  
  <p>The first issue is that I'm unable to align the Rating to the right within the Title, Rating row. So I want the title to be left aligned, and rating to be right aligned. For this, I tried to give a flex rating to both widgets, but as soon as I do that, both disappear. The only way I can think of is to give the Title a width, but that's a very hacky way and will break on most devices.
  <br><br></p></li>
  <li><p><strong>Second Issue</strong></p>
  
  <p>I want the Description to fit within the bounds of the Card. However, unless I define a specific width to the Container for Description, I'm unable to constrain it within the bounds of the screen. I tried encasing it within an Expanded, Flex and Flexible with various flex values, but no luck. I tried to use the softWrap property of Text widget, but again no luck. As soon as I wrap the Text in any of those widgets, it disappears. In the above code I've wrapped the Text in a Container, and set a width to it. This works, but again, it's very hacky, and will look different on different device, plus will break on a few.</p></li>
  </ol>
  
  <p>Any help on these issues would be great.</p>