Text overflow ellipsis in Listview only on item that actually overflow

Question

I have a horizontal ListView which is in the Column in which I want to show ellipsis on the last Text widget, if that list overflow. How I can achieve this? I added TextOverflow.ellipsis on Text widget but it still doesn't work. So I want for that last item in that horizontal list (Obstetrics & Gynae in this case) to have ... at the end.

class Card extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<DoctorData?>(
      future: _bloc.getData(id: id, context: context),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final data = snapshot.data;

          if (data != null) {
            return GestureDetector(
              onTap: () => (),
              child: Container(
                padding: const EdgeInsets.all(16),
                child: Container(
                  padding: const EdgeInsets.all(8),
                  child: Row(
                    children: [
                      Image(data: data),
                      const SizedBox(width: 8),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(data.name),
                            SizedBox(
                              height: 18,
                              child: ListView.separated(
                                physics: const NeverScrollableScrollPhysics(),
                                itemBuilder: (context, index) => Text(
                                  data.relations[index].code,
                                  overflow: TextOverflow.ellipsis,
                                ),
                                separatorBuilder: (_, __) => const Text(' · '),
                                itemCount: data.relations.length,
                                scrollDirection: Axis.horizontal,
                              ),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(width: 8),
                      const ChevronRightIcon(),
                    ],
                  ),
                ),
              ),
            );
          }
        }

        return Container();
      },
    );
  }
}

Try adding width to SizedBox which wraps your ListView.seperated. If you want overflow to appear only when space is not available, add width as Device Width minus some value. For eg SizedBox(height: 18, width: MediaQuery.of(context).size.width - 50,...) — Prashant
– Prashant, Commented Aug 3, 2022 at 11:26
Can you describe in more detail about what exactly are you trying to achieve? — Prashant
– Prashant, Commented Aug 3, 2022 at 11:29
So I want for this last item in that horizontal list (Obstetrics & Gynae in this case) to have ... at the end. — Joe
– Joe, Commented Aug 3, 2022 at 11:30

Mohan Sai Manthri · Accepted Answer · 2022-08-03 11:33:43Z

1

If you want to use ellipsis it should overflow, but in listView it just expands to take space, So you can wrap you subTitle in the sized box.

SizedBox(
      width: context.width * 0.9, // we are letting the text to take 90% of screen width
      child: Text(
        data.relations[index].code,
        overflow: TextOverflow.ellipsis,
      ),
    );

If you have any questions please free to drop it in comments I will try to address those. Thanks 🙂

UPDATE:

Here is the UI implemented in the dartpad.

And gist link

edited Aug 3, 2022 at 11:33

answered Aug 3, 2022 at 11:19

Mohan Sai Manthri

3,2091 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Joe Over a year ago

This doesn't work for me. First item then takes all the space. If your context.width is MediaQuery.of(context).size.width?

Mohan Sai Manthri Over a year ago

Yes, Lemme build the UI for you

Mohan Sai Manthri Over a year ago

I mean I will try to build the same UI and will share it here Lemme -> Let me

Mohan Sai Manthri Over a year ago

@Joe does the issue resolved?

Mohan Sai Manthri Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

Text overflow ellipsis in Listview only on item that actually overflow

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related