How to make the size of the Text Widget change with the content in flutter?

Question

I want to design a combined Text widget that consists of two Text widget.

The size of the first Text widget changes as the content changes, and when it reaches the maximum length, an ellipsis is displayed. Like below, the red line part is fixed.

Then this is my code:

Row(
  children: <Widget>[
    Expanded(
      child: Text(
        'W',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
);

When the length is the largest, the display is normal. But when the length is very small, there will be a blank in the middle.

So, how do I need to improve my code?

ibhavikmakwana · Accepted Answer · 2019-10-09 04:26:05Z

4

You need to use Flexible widget instead of the Expanded.

Row(
  children: <Widget>[
    Flexible(
      child: Text(
        'Was',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
),

Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis.

While Expanded, forces the child to expand to fill the available space.

You can also pass the fit: FlexFit.tight [The child is forced to fill the available space] or fit: FlexFit.loose [The child can be at most as large as the available space (but is allowed to be smaller).] to Flexible widget.

By Default it is set to FlexFit.loose.

answered Oct 9, 2019 at 4:26

ibhavikmakwana

10.3k4 gold badges24 silver badges41 bronze badges

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

1 Comment

Martin Zhu Over a year ago

Thank you for your help, this is the effect I want.

Pablo Barrera · Accepted Answer · 2019-10-09 04:22:13Z

1

You should use Flexible instead of Expanded

Row(
  children: <Widget>[
    Flexible(
      child: Text(
        'W',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
)

answered Oct 9, 2019 at 4:22

Pablo Barrera

11k3 gold badges32 silver badges50 bronze badges

Comments

CopsOnRoad · Accepted Answer · 2019-10-09 04:17:56Z

0

Not sure if I got your question properly, do you want to remove the white space?

Row(
   children: <Widget>[
     Expanded(
       child: Align( // add this
         heightFactor: 1,
         alignment: Alignment.centerRight, // this is what you need
         child: Text(
           'W',
           overflow: TextOverflow.ellipsis,
         ),
       ),
     ),
     Text(
       '(0x1234…1234)',
       style: TextStyle(
         fontSize: 12,
         color: Colors.black,
       ),
     ),
   ],
 )

answered Oct 9, 2019 at 4:17

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

Collectives™ on Stack Overflow

How to make the size of the Text Widget change with the content in flutter?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related