CODEWITHSUNDEEP
flutterrefreshbloc
Nikhileshwar
Nikhileshwar

Reputation: 1684

How to add ellipsis to a text widget in between two text widget in a row widget

I am in need to create a UI similar to below illustration. The second text to shrink to give space for third text in a row.

Excepted UI

Excepted UI

But the second text doesn't shrink whereas the third text widget shrinks

Present UI

enter image description here

I used expanded to wrap the third Text widget. It didn't help.

Row(children: [
  Container(color:Colors.lightBlue, child:Text('1one'),),
  Container(
    color:Colors.lightGreen,
    child:Text(
      '2Two2Two2Two2dbTwo2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2', 
      overflow: TextOverflow.ellipsis)),
  Expanded(
    child:Container(
      color:Colors.orange, 
      child: Text('Three3Three3Three3Three3Three3Three3Three3Three3Three3Three')
    )
  )
])

Dart pad

Upvotes: 0

Views: 68

Answers (2)

Jigar Patel
Jigar Patel

Reputation: 5423

Wrap the second widget with Expanded, instead of wrapping the third one.

Reason

Expanded widget render the child within the leftover available space,

In the above requirement the second text needs to be rendered in the left over space not the third one, Hence the second text has to be wrapped by Expanded not the third one.

Upvotes: 1

towhid
towhid

Reputation: 3288

you can use expanded and flex value to distribute the whole space

Row(
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.lightBlue,
                  child: Text('1one'),
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  color: Colors.lightGreen,
                  child: Text(
                      '2Two2Two2Two2dbTwo2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2',
                      overflow: TextOverflow.ellipsis),
                ),
              ),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.orange,
                  child: Text(
                    'Three3Three3Three3Three3Three3Three3Three3Three3Three3Three',
                    maxLines: 1,
                  ),
                ),
              )
            ],
          ),

Result enter image description here

Upvotes: 0

Related Questions