Text Overflow inside ROW widget doesn't work-CodePudding

So I tried to put a text after an icon, so i use Row. But when I input the long text it does overflow the SizedBox. so i add TextOverflow, but the Textoverflow didn't work

Here's the code :

Row(
children: [
  Icon(
    Icons.location_on,
    size: 2.h,
    color: Color(0xFFE32346),
  ),
  Padding(
      padding: EdgeInsets.only(left: 1.h),
      child: Text(
        Address,
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
        style: TextStyle(
            color: Colors.black,
            fontSize: 16.sp,
            fontFamily: 'Poppins'
        ),
      )
  ),
]),

CodePudding user response：

this is the example . please use Expanded in this use case

like this way

 Row(children: [
              Icon(
                Icons.location_on,
                size: 20,
                color: Color(0xFFE32346),
              ),
              Expanded(
                  child: Text(
                 '     qqqqqqqqqqqqqq qqqqqqqqqqqqqq qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq',
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                style: TextStyle(
                    color: Colors.black, fontSize: 16, fontFamily: 'Poppins'),
              )),
            ]),

the output will be

CodePudding user response：

Try this,

You should wrap your code inside Container ant than in a Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded will also work.

 Row(
 children: [
          Expanded(
       Icon()
           ),
        Expanded(
          Text()
           )

            
        ]),

CodePudding user response：

You have to use the ConstrainedBox is a built-in widget in flutter SDK. Its function is to add size constraints to its child widgets,Wrap your text with ConstrainedBox and set widthconstraints

Please refer the following link

https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html

CodePudding user response：

I prefer using RichText cases like this.

RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Icon(
          Icons.location_on,
          size: 22,
          color: Color(0xFFE32346),
        ),
      ),
      TextSpan(
        text: "address",
      ),
    ],
  ),
)

For row case, use SizedBox for spacing and wrap Text with Expanded to get available space.

Row(children: [
  Icon(
    Icons.location_on,
    size: 22,
    color: Color(0xFFE32346),
  ),
  SizedBox(width: 12),
  Expanded(
    child: Text(
      "Addresssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
      overflow: TextOverflow.ellipsis,
      maxLines: 1,
      style: TextStyle(
        color: Colors.black,
        fontSize: 16,
        fontFamily: 'Poppins',
      ),
    ),
  ),
]),