flutter, Overflowed list tile pixels

Question

everything works fine with my list tile widget on another project/apps but i don't understand why in here it's overflowed, i already try wrap it with expanded in every where, put height/width on parent container but nothing works. But one things work when i put width in the location text container but i don't think it's something good.

Stack(
          children: [
            Container(
              margin: EdgeInsets.fromLTRB(24, 12, 24, 12),
              child: Row(
                children: [
                  // Image
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // name
                      // category
                      // open status
                      // location
                      Row(
                        children: [
                          Icon(
                            Icons.location_on_outlined,
                            size: 16,
                          ),
                          SizedBox(width: 4),
                          Container(
                            // width: MediaQuery.of(context).size.width * 0.55,
                            child: Text(
                              morePlaces[i]['alamat'],
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                fontSize: 12,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
            // Star rating
            Positioned(
              top: 24,
              right: 24,
              child: Container(),
            ),
          ],
        ),

This is the full code

Stack(
          children: [
            Container(
              margin: EdgeInsets.fromLTRB(24, 12, 24, 12),
              child: Row(
                children: [
                  // Image
                  ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Image.network(
                      morePlaces[i]['gbr'],
                      width: 84,
                      height: 84,
                      fit: BoxFit.cover,
                    ),
                  ),
                  SizedBox(width: 12),

                  // Detail
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // nama
                      Text(
                        morePlaces[i]['nama'],
                        style: TextStyle(
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                      SizedBox(height: 4),

                      // kategori
                      Text(
                        morePlaces[i]['kategori'],
                        style: TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 12,
                        ),
                      ),
                      SizedBox(height: 4),

                      // status buka
                      Row(
                        children: [
                          Icon(
                            Icons.watch_later_outlined,
                            size: 16,
                          ),
                          SizedBox(width: 4),
                          Text(
                            'Open Now',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 12,
                              color: Colors.green,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 4),

                      // alamat
                      Row(
                        children: [
                          Icon(
                            Icons.location_on_outlined,
                            size: 16,
                          ),
                          SizedBox(width: 4),
                          Container(
                            width: MediaQuery.of(context).size.width * 0.55,
                            child: Text(
                              morePlaces[i]['alamat'],
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                fontSize: 12,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Positioned(
              top: 24,
              right: 24,
              child: Container(
                padding: EdgeInsets.fromLTRB(6, 4, 6, 4),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.star,
                      color: Colors.yellow,
                    ),
                    SizedBox(width: 4),
                    Text(
                      '5.0',
                      style: TextStyle(
                          color: Constants.redonesmile,
                          fontSize: 15,
                          fontWeight: FontWeight.bold),
                    ),
                    Text(
                      '/',
                      style: TextStyle(
                        color: Constants.redonesmile,
                        fontSize: 12,
                      ),
                    ),
                    Text(
                      '5',
                      style: TextStyle(
                        color: Constants.redonesmile,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),

Try to add your Inside Row widgets wrap it with `Expanded` or `Flexible` refer my answer [here](https://stackoverflow.com/a/68463935/13997210) or [here](https://stackoverflow.com/a/68559619/13997210) or [here](https://stackoverflow.com/a/68444861/13997210) or [here](https://stackoverflow.com/a/70743585/13997210) or [here](https://stackoverflow.com/a/70743585/13997210) hope its helpful to you , Add your Container inside Expanded or Flexible — Ravindra S. Patil, Apr 23 '22 at 05:21

mohit yadav · Answer 1 · 2022-04-23T05:39:12.320

0

using width in container is correct way to prevent overflow by that you are specifying that this widget will occupy this much width and if your text is long you can increase maxlines to display whole text

Container(
           width: MediaQuery.of(context).size.width * 0.55,
           child: Text(morePlaces[i]['alamat']
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 12),
            ),
          )

edited Apr 23 '22 at 05:39

answered Apr 23 '22 at 05:20

mohit yadav

166
4

already try it before and not working – CCP Apr 23 '22 at 05:23

score 0 · Answer 2 · answered Apr 23 '22 at 05:36

0

Your text is long. That is why it doesnt fit the screen. You should wrap that text with Flexible to switch to next line.And also remove maxLines property, that can effect visibility of your whole text:

       //alamat
       Flexible(
          child: Text(
            'YOUR TEXT HERE',
            style: TextStyle(
                color: Constants.redonesmile,
                fontSize: 15,
                fontWeight: FontWeight.bold,
            ),
          ),
        ),

this will help you.

answered Apr 23 '22 at 05:36

aedemirsen

92
1
10

already try it before and not working, it's usually working but now it's not this is why i post this question – CCP Apr 23 '22 at 05:50
I think your sum of width values for a line exceeds to screen width. Try to remove "width: MediaQuery.of(context).size.width * 0.55," in your container. – aedemirsen Apr 23 '22 at 05:53

flutter, Overflowed list tile pixels

2 Answers2