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,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),

CodePudding user response：

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.

CodePudding user response：

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),
            ),
          )