Flutter - SliverChildList Text overflow

Question

I'm trying to get my app polished and noticed an issue with the SliverChildList I'm using. When the Text inside is too long to be displayed I get an expection thrown.

How am I able to correctly wrap the Text (not cut)

As in my example most of the entries work just fine. For the elements that overflow I'd like to break the text to the next line and adapt the list element height.

Something simular to:

{       } Colombian White-Faced Capuchin
{ image } Monkey
{       } Cebus capucinus

I tried adding overflow: TextOverflow.ellipsis to the text element but it doesn't appear to work the way I'd like it to.

Code:

SliverList(
  delegate: SliverChildListDelegate(
    [
      for (var animal in response)
        GestureDetector(
            onTap: () {
              print('(DEBUG) Pressed on ${animal['id']} (${animal['name']})');
            },
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Image.network(
                    animal['image_url'],
                    fit: BoxFit.cover,
                    width: 75,
                    height: 50,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(15, 10, 20, 10),
                  child: Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(animal['name'].toString(),
                            style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.bold),
                            overflow: TextOverflow.ellipsis),
                        if (animal['latin_name'] != null)
                          Text(animal['latin_name'].toString(),
                              style: TextStyle(
                                  fontStyle: FontStyle.italic)),
                      ],
                    ),
                  ),
                ),
              ],
            )),
    ],
  ),
)

question from:https://stackoverflow.com/questions/65641611/flutter-sliverchildlist-text-overflow

Answer 1

Try wrapping your Text widget in a Flexible or Expanded widget.