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

score 0 · Answer 1 · answered Jan 09 '21 at 15:00

0

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

answered Jan 09 '21 at 15:00

Tom Truyen

318
1
3
15

unfortunately wrapping the text in either won't work for me. I wrapped just the bold animal name in these to try and and this was the result: https://imgur.com/a/zqtC6Ei – lechnerio Jan 12 '21 at 05:35
Maybe attempt to wrap the 'Padding' widget inside an Expanded then. I think that should work :) – Tom Truyen Jan 12 '21 at 11:06

Flutter - SliverChildList Text overflow

1 Answers1