CODEWITHSUNDEEP
flutterdartflutter-layout
ComaXD EA1
ComaXD EA1

Reputation: 415

How to Fix Text Overflow error in Flutter

How to fix this overflow error, I try to put the Flexible and Expanded but the error is still there.

Container(
  color: Theme.of(context).accentColor,
  margin: EdgeInsets.only(top: 0),
  child: Row(
    children: [
      Container(
          height: 50,
          padding: EdgeInsets.only(top: 20, bottom: 0),
          margin: EdgeInsets.only(left: 15, bottom: 30),
          child: Center(
            child: Text(
              'Explore',
              style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
            ),
          )),
      if (settingsRepo.deliveryAddress.value?.address != null)
        Row(
          children: [
            Container(
                padding: EdgeInsets.only(top: 20, bottom: 0),
                margin: EdgeInsets.only(left: 15, bottom: 25),
                child: Icon(
                  Icons.location_on,
                  color: Colors.white,
                )),
            // SizedBox(
            //   width: 10,
            // ),
            Container(
              color: Colors.transparent,
              padding: EdgeInsets.only(
                top: 20,
                bottom: 0,
              ),
              margin: EdgeInsets.only(left: 2, bottom: 25),
              child: Text(
                "Near to" +
                    " " +
                    (settingsRepo.deliveryAddress.value?.address),
                style: TextStyle(
                    fontSize: 13,
                    color: Colors.white,
                    fontWeight: FontWeight.normal),
                overflow: TextOverflow.ellipsis,
                softWrap: false,
              ),
            ),
          ],
        ),
    ],
  ),
);

Light code In picture is text with make error For some reason text can't overflow , when user pick some other location with less letters, then error is gone, but when location is .. enter image description here

enter image description here

Upvotes: 1

Views: 483

Answers (3)

Tasnuva Tavasum oshin
Tasnuva Tavasum oshin

Reputation: 4750

Use FittedBox() For Text Overflow Error. It will Solve your Problem

Upvotes: 0

Abdelrahman Mohamed Elakliby
Abdelrahman Mohamed Elakliby

Reputation: 589

Text(
      'hello',
       textAlign: TextAlign.center,
       softWrap: true,
);

or you can used AutoSizeText

AutoSizeText(
          "hello",
          style: TextStyle(fontWeight: FontWeight.w300,),
          maxLines: 2,
        ),

Upvotes: 2

prahack
prahack

Reputation: 1599

Try this;

Container(
  color: Theme.of(context).accentColor,
  margin: EdgeInsets.only(top: 0),
  child: Row(
    children: [
      Container(
          height: 50,
          padding: EdgeInsets.only(top: 20, bottom: 0),
          margin: EdgeInsets.only(left: 15, bottom: 30),
          child: Center(
            child: Text(
              'Explore',
              style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
            ),
          )),
      if (settingsRepo.deliveryAddress.value?.address != null)
        Row(
          children: [
            Container(
                padding: EdgeInsets.only(top: 20, bottom: 0),
                margin: EdgeInsets.only(left: 15, bottom: 25),
                child: Icon(
                  Icons.location_on,
                  color: Colors.white,
                )),
            // SizedBox(
            //   width: 10,
            // ),
            Container(
              width: 150,
              color: Colors.transparent,
              padding: EdgeInsets.only(
                top: 20,
                bottom: 0,
              ),
              margin: EdgeInsets.only(left: 2, bottom: 25),
              child: Text(
                "Near to" +
                    " " +
                    (settingsRepo.deliveryAddress.value?.address),
                style: TextStyle(
                    fontSize: 13,
                    color: Colors.white,
                    fontWeight: FontWeight.normal),
                overflow: TextOverflow.ellipsis,
                softWrap: false,
              ),
            ),
          ],
        ),
    ],
  ),
)

Upvotes: 0

Related Questions