如何将省略号添加到行小部件中两个文本小部件之间的文本小部件

Question

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

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

Present UI

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

Answer 1

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.

Answer 2

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