CODEWITHSUNDEEP
dartflutter
Manuel Munoz
Manuel Munoz

Reputation: 783

Flutter Text widget not bounded by parent's size

I have the following code for a Cell item in ListView:

Widget build(BuildContext context) {
    return new Container(
      height: 120.0,
      padding: new EdgeInsets.only(left: 8.0, top: 4.0, right: 8.0, bottom: 4.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: new Image.network(
                movie.imageUrl,
                height: 120.0,
                width: 80.0,
                fit: BoxFit.fitHeight,
            ),
          ),
          new Expanded(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(movie.title),
                  new Flexible(
                    child: new Container(
                      padding: const EdgeInsets.symmetric(vertical: 6.0),
                      child: new Text(
                          movie.about,
                      ),
                    ),
                  )
                ],
              )
          )
        ],
      ),
    );
  }

Which shows the following: enter image description here

When the movie description is bigger than the cell size, the text overflows, i want it to clip, or end in an ellipsis and cant seem to make it work.

Upvotes: 2

Views: 1180

Answers (2)

Stephan
Stephan

Reputation: 535

Try "maxLines": 

child: Text(
    'test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test ', 
    overflow: TextOverflow.ellipsis,
    maxLines: 5,
)

Upvotes: 0

Danny Tuppeny
Danny Tuppeny

Reputation: 42333

You can set overflow: TextOverflow.ellipsis, to clip the text and show an elipsis:

child: new Text(
    'test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test ',
    overflow: TextOverflow.ellipsis,
  ),

However your next question will be about wrapping, and I can't figure that one out :(

Upvotes: 1

Related Questions