Flutter Table layout is not responding according to expected - flutter

Question

Using Flutter v1.20.2
The following code
var data = [
['a', 'VerylongstringwithnospacesVerylongstringwithnospaces'],
['abc', '123456789'],
['abcdefg', '123'],
];
Expanded(
child: Table(
border: TableBorder.all(color: Colors.red),
columnWidths: {
0: IntrinsicColumnWidth(),
1: IntrinsicColumnWidth(),
},
children: data.map<TableRow>((x) => (
TableRow(
children: <TableCell>[
TableCell(child: Container(child: Text(x[0]))),
TableCell(child: Container(color: Colors.green, child: Text(x[1]))),
],
)
)).toList(),
),
),
results in this layout
As you can see the text overflows the boundary of the table.
I have tried innumerable solutions but none have worked. It appears that the TableCell itself has a width bigger than it should have, comparing to the size of the column of the table.
The biggest problem is that the size of both columns are unknown, they could be hundreds of characters long or single letter. In case of it being bigger than the width the text should break to the next line.
Is there a way to make a fluid grid layout so that both sides resize according to the amount of content for each Column? The ideal layout would be something like this

Answer 1

The reason why It’s happening is that the IntrinsicColumnWidth doesn’t give TableCell parent size. Because it's trying to set the column width based on child width. At the same time, to make text wrapping on lines, you need to have the width of parent, otherwise text widget don’t know it’s limits.
What options do you have :
FixedColumnWidth
FlexColumnWidth
FractionColumnWidth
MaxColumnWidth
MinColumnWidth
(Last two widgets used max/min of other TableColumnWidth widgets.)
In your case if you know that the text in the first column never will need to be wraped in lines, you can remove IntrinsicColumnWidth as parameter of second column. If you know that long text is possible, add the maximum width by adding MinColumnWidth
dartpad example