How to let column not be wider than a specific widget

Question

I have following scenario, initially I have a DataTable which contains some lines (user list), with some necessary columns, which one column will expand in height when there are additional matches from a search box.

No match:

Following shows an entry with match:

And it shows that search matched on one of my email-addresses. As you can see the length now surpasses the table row length, and the SMS icons falls out of the table line (it is still there, but it surpasses).

The "name column" here is defined in DataCell with child as Column which is now defined like this:

DataCell(
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(children: [
          Expanded(child: Text("${fullName}", style: TextStyle(fontWeight: FontWeight.bold,color: matchNm==true?Colors.blue:null),)),
        ],),
        (showMatching==true&&matchMob==true)?Row(
          children: [
            Expanded(child: Text("${contacts?[index].mobPh}",style: TextStyle(color: matchMob==true?Colors.blue:null),)),
          ],
        ):const SizedBox.shrink(),
        (showMatching==true&&matchEmail==true)?Row(
          children: [
            Expanded(child: Text("${contacts?[index].mailAd}",style: TextStyle(color: matchEmail==true?Colors.blue:null),)),
          ],
        ):const SizedBox.shrink(),
      ],
    )),

How can I set the Text (i.e. with overflow with ellipsis) to not expand more than the size which is available from the length of the remaining in DataRow?

I want it to look similar like this:

Here the SMS icon remains. I have drawn an ellipsis by hand just to show how we want it to be.

Is there a way to determine the remaining space within a container or some similar (third-party) widget?

Answer 1

Try below code and used Row, ListTile, Chnage Icons and Text on your need

Container(
      padding: EdgeInsets.all(5),
      child: Row(
        children: [
          Text('2444 501'),
          Expanded(
            child: ListTile(
              title: Text(
                'Grønmo, Roar',
                overflow: TextOverflow.ellipsis,
              ),
              subtitle: Text(
                '[email protected]',
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          Icon(Icons.email),
          SizedBox(
            width: 10,
          ),
          Icon(Icons.mobile_friendly),
          SizedBox(
            width: 10,
          ),
          Icon(Icons.message),
        ],
      ),
    ),

Result Screen->