Question 79200 in Flutter Question posted in
The official Flutter documentation can be found here.

I want the Text title not overlap the thumbnail container just like in youtube – Flutter

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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,
                      )),
                ],
              ),
            );
          },
        ))
    Login or Signup to reply.
  3. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search