I want the text to adjust vertically with 2 lines as the limit, and the rest be a ... but maxLines didn't work

How it looks How I want it to look

This is my code:

Container(
                        margin: const EdgeInsets.symmetric(vertical: 20.0),
                        height: 150.0,
                        child: ListView(
                          // This next line does the trick.
                          scrollDirection: Axis.horizontal,
                          children: <Widget>[
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Container(
                                  child: Column(children: [
                                    Row(
                                      children: [
                                        Stack(
                                          children: [
                                            ClipRRect(
                                              borderRadius:
                                                  BorderRadius.circular(8.0),
                                              child: Image.network(
                                                videos[1].thumbnailUrl,
                                                height: 80,
                                                width: 150,
                                                fit: BoxFit.fill,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    )
                                  ]),
                                ),
                                Flexible(
                                    child: Text(
                                  videos[1].title,
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                )),
                              ],
                            ),

How do I fix this error

CodePudding user response：

Your column does not have an horizontal limit and can expand indefinitely, you have to define a width to limit your text, I recommend you to wrap your entire column inside a SizedBox, then adjust the image fit to always fit that size and then maxLines will work.

CodePudding user response：

try this you need just to put container width to overflow the text

return Container(
        margin: const EdgeInsets.symmetric(vertical: 20.0),
        height: 150.0,
        color: Colors. yellow,
        child: ListView.builder(
          // This next line does the trick.
          scrollDirection: Axis.horizontal,
          itemCount: 4,
          itemBuilder: (context, index) {
            return SizedBox(
              width: 150,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    color: Colors.red,
                    child: Column(children: [
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Stack(
                            children: [
                              ClipRRect(
                                borderRadius:
                                BorderRadius.circular(8.0),
                                child: Image.network(
                                  videos[1].thumbnailUrl,
                                  height: 80,
                                  width: 150,
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ],
                          ),
                        ],
                      )
                    ]),
                  ),
                  const Expanded(
                      child: Text(
                        videos[1].thumbnailUrl,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      )),
                ],
              ),
            );
          },
        ))

CodePudding user response：

If you used Flexible, the text would fit in 1 line. Change Flexible to Extended then maxline and overflow will work.