How to stretch one of the TableRow's children to the maximum available height?

user_12483095 0
Viewed 684

Code:

Table(
  children: [
    TableRow(
      children: [
        Container(height: 100, color: Colors.red),
        Container(color: Colors.green), // Read 'Q1' below. 
        Container(height: 100, color: Colors.blue),
      ],
    ),
  ],
)

Q1: How to stretch green Container height to the maximum height of the given TableRow?

PS: For simplicity, I provided manual heights to the container1 and the container2 but in real world, I don't know their heights. Second, I know I can find the height of both the Container using RenderBox and then I can find out the max of (container1, container3) and apply that to the 2nd one but that would be too much of work, I'm looking for a better approach.

flutter
1 Answers

Use TableCell and TableCellVerticalAlignment.fill.

TableCell:

A widget that controls how a child of a Table is aligned. A TableCell widget must be a descendant of a Table, and the path from the TableCell widget to its enclosing Table must contain only TableRows, StatelessWidgets, or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).

TableCellVerticalAlignment.fill:

Cells with this alignment are sized to be as tall as the row, then made to fit the row.If all the cells have this alignment, then the row will have zero height.

Table(
  children: [
    TableRow(
      children: [
        Container(height: 100, color: Colors.red),
        TableCell(
          verticalAlignment: TableCellVerticalAlignment.fill,
          child: Container(color: Colors.green),
        ),
        Container(height: 100, color: Colors.blue),
      ],
    ),
  ],
)
user_95039120
Related