When scroll direction is horizontal, text overflow is not working. How can I TextOverflow.ellipsis work properly?

Viewed 77

I would like to overflow long text in a column with Card. Text must overflow width of Card. Scroll Direction set to Axis.horizontal for that reason TextOverflow does not pass to second line or overlow. Do you have any suggestions?

SingleChildScrollView(
                                                  scrollDirection:
                                                      Axis.horizontal,
                                                  child: Row(
                                                    children: [
                                                      Column(
                                                        children: [
                                                          Flexible(
                                                            flex: 5,
                                                            child: SizedBox(
                                                              width: 80.w,
                                                              height: 80.h,
                                                              child: Card(
                                                                  elevation: 2,
                                                                  shape: RoundedRectangleBorder(
                                                                      borderRadius:
                                                                          BorderRadius.circular(
                                                                              10.r)),
                                                                  child: Center(
                                                                    child: Image
                                                                        .network(
                                                                      productsProvider
                                                                          .randomProducts[
                                                                              itemIndex]
                                                                          .photo,
                                                                      fit: BoxFit
                                                                          .cover,
                                                                    ),
                                                                  )),
                                                            ),
                                                          ),
                                                          Flexible(
                                                            child: Text(
                                                              productsProvider
                                                                  .randomProducts[
                                                                      itemIndex]
                                                                  .name,
                                                              style: TextStyle(
                                                                  fontSize:
                                                                      10.sp),
                                                              overflow:
                                                                  TextOverflow
                                                                      .ellipsis,
                                                              maxLines: 2,
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                    ],
                                                  ),
                                                );
                                             

Here is the output

This is the code that everybody can see what happens. It is not complicated but I did not find a solution to work properly.

ListView.builder(
        itemCount: strings.length,
        shrinkWrap: true,
        controller: _scrollController,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Padding(padding: EdgeInsets.only(bottom: 8)),
              Container(
                alignment: Alignment.centerLeft,
                child: Text(strings[index]),
                padding: EdgeInsets.only(bottom: 8, left: 8),
              ),
              Container(
                decoration: BoxDecoration(color: Colors.white),
                child: Padding(
                  padding: EdgeInsets.all(8),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 80,
                        width: MediaQuery.of(context).size.width,
                        child: ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            itemCount: 2,
                            itemBuilder: (BuildContext context, int itemIndex) {
                              return SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                child: Row(
                                  children: [
                                    Column(
                                      children: [
                                        Flexible(
                                          flex: 5,
                                          child: SizedBox(
                                            width: 80,
                                            height: 80,
                                            child: Card(
                                                elevation: 2,
                                                shape: RoundedRectangleBorder(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            10)),
                                                child: Center(
                                                  child: Image.network(
                                                    'https://ayb.akinoncdn.com/products/2019/04/24/21736/788e20d1-81ca-42da-a6bb-25c2698fafaa_size780x780_quality60_cropCenter.jpg',
                                                    fit: BoxFit.cover,
                                                  ),
                                                )),
                                          ),
                                        ),
                                        Flexible(
                                          child: Text(
                                            'Osmanlı şahzade badem ezmesi. Üretimi tecrübeye sabit',
                                            style: TextStyle(fontSize: 10),
                                            overflow: TextOverflow.ellipsis,
                                            maxLines: 2,
                                          ),
                                        )
                                      ],
                                    ),
                                  ],
                                ),
                              );
                            }),
                      )
                    ],
                  ),
                ),
              ),
            ],
          );
        });
1 Answers

Actually the reason behind is that you have set the scrollDirection to horizontal and inside it you are using a Row as well which also has a horizontal axis direction and after that you are passing your Text widget inside Flexible and according to Flexible widget property it will stretch it self according to it's child size. In your case Flexible has a unbounded width so it's expanding it self according to it's child which result a full length text to appear and because it's showing full content TextOverflow.ellipsis will not work.

Basically to solve this you have to wrap your Text widget to a SizedBox so that it can have a bounded width.

Related