Text Overflow inside ROW widget doesn't work

Question

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

@YeasinSheikh im trying to put icons before text, and the overflow did not work inside the row — Macchiato
– Macchiato, Commented Mar 23, 2022 at 4:09

Jinto Joseph · Accepted Answer · 2022-03-23 05:08:52Z

14

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

edited Mar 23, 2022 at 5:08

answered Mar 23, 2022 at 4:00

Jinto Joseph

1,5342 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

nagendra nag Over a year ago

why padding and screen utils are removed?

Jinto Joseph Over a year ago

don 't remove screen utile , i am not using that plugin ,so i removed and

Macchiato Over a year ago

@nagendranag so you can still use padding but inside the Expanded

Jinto Joseph Over a year ago

just inspect padding widget...... , you will get the answer ,and just inspect the expanded widget

nagendra nag Over a year ago

@Macchiato I know we can add padding inside the Expanded ......I am just asking why that padding was removed ...to know if there are any specific reasons?

|

Manishyadav · Accepted Answer · 2022-03-23 04:12:36Z

1

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.

or

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

            
        ]),

answered Mar 23, 2022 at 4:12

Manishyadav

1,8662 gold badges14 silver badges28 bronze badges

2 Comments

Manishyadav Over a year ago

Let me know if it works

aaronkelton Over a year ago

You mention wrapping the code in a Container, but the code sample doesn't show any Container. Please fix the formatting too.

Sneha G Sneha · Accepted Answer · 2022-03-23 05:45:37Z

0

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

answered Mar 23, 2022 at 5:45

Sneha G Sneha

1014 bronze badges

Comments

Md. Yeasin Sheikh · Accepted Answer · 2022-03-23 06:04:27Z

-1

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

Row(
 children: [
  Icon(..),
  // SizedBox(width: x),// if you dont use padding
  Expanded(
    child: Padding( 
        padding: const EdgeInsets.only(..)
        child:  Text( Address,
      overflow: TextOverflow.ellipsis,
      maxLines: 1,
    ),
  ),
]),

edited Mar 23, 2022 at 6:04

answered Mar 23, 2022 at 4:16

Md. Yeasin Sheikh

64.9k7 gold badges50 silver badges86 bronze badges

Collectives™ on Stack Overflow

Text Overflow inside ROW widget doesn't work

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related