Repository: flutter
Issue: [DataTable] Can't define column widgets fractionally or by absolute size
Labels: framework,f: material design,a: quality,team-design,triaged-design

We would like to create a design with Data table, with flex based columns like:

|- Col 1 ----------------------------------- | -- Col 2 -- |  -- Col 3 -- | 

There's 3 ways we'd expect this to work: 
* Assign `flex: 4, flex: 1, flex: 1`  to the various columns. 
* Assign a width to Col1, let the other 2 columns split the difference, 
* Or vice-versa, assign a small size to Col2 and Col3, and let Col1 flex.

But none of these approaches work as expected. 

Option 1 doesn't work, as event though we can pass Expanded() into the DataColumn.label field, the flex factor seems to be entirely ignored.
```
child: DataTable(
  dataRowColor: MaterialStateProperty.all(Colors.green),
  columns: [
    DataColumn(onSort: (_, __) {}, label: Expanded(flex: 4, child: Text("Name"))),
    DataColumn(onSort: (_, __) {}, label: Expanded(flex: 1, child: Text("Modified"))),
    DataColumn(onSort: (_, __) {}, label: Expanded(flex: 1, child: Text("Created"))),
  ],
  rows: List.generate(20, (b) {
    return DataRow(
      cells: [
        DataCell(Container(color: Colors.red)),
        DataCell(Text("Modified")),
        DataCell(Text("Created")),
      ],
    );
  }).toList(),
),
```
This yields 3 evenly spaced columns, ignore flex value totally. This feels like a bug.
![image](https://user-images.githubusercontent.com/736973/110690854-a3a2b800-81a1-11eb-8d76-edc3371459aa.png)

Option 2, sizes Col1: 
```
DataTable(
  dataTextStyle: TextStyles.body2,
  dataRowColor: MaterialStateProperty.all(Colors.green),
  columnSpacing: 0,
  columns: [
    DataColumn(onSort: (_, __) {}, label: SizedBox(width: 600, child: Text("Name"))),
    DataColumn(onSort: (_, __) {}, label: Text("Modified")),
    DataColumn(onSort: (_, __) {}, label: Text("Created")),
  ],
  rows: List.generate(20, (b) {
    return DataRow(
      cells: [
        DataCell(SizedBox(width: 600, child: Container(color: Colors.red))),
        DataCell(Text("Modified")),
        DataCell(Text("Created")),
      ],
    );
  }).toList(),
)
```

Renders something like this, which doesn't make much sense. 
https://user-images.githubusercontent.com/736973/110689655-2e82b300-81a0-11eb-8df1-9ac0d07b5f92.mp4

The DataCell is correctly sized to 600px, but the DataColumn just stretches. So our Row and Column widths for Col1 don't match up, which we do not want.

Option 3, size the 2 smaller columns, and allow the Col1 to just take up the rest. That yields even weirder results:
```
child: DataTable(
  dataTextStyle: TextStyles.body2,
  dataRowColor: MaterialStateProperty.all(Colors.green),
  columnSpacing: 0,
  horizontalMargin: 0,
  columns: [
    DataColumn(onSort: (_, __) {}, label: Expanded(child: Text("Name"))),
    DataColumn(onSort: (_, __) {}, label: SizedBox(width: 150, child: Text("Modified"))),
    DataColumn(onSort: (_, __) {}, label: SizedBox(width: 150, child: Text("Created"))),
  ],
  rows: List.generate(20, (b) {
    return DataRow(
      cells: [
        DataCell(Container(color: Colors.red)),
        DataCell(SizedBox(width: 150, child: Text("Modified"))),
        DataCell(SizedBox(width: 150, child: Text("Created"))),
      ],
    );
  }).toList(),
),
```
As written, you would expect 2 cols to be 150 each, and then unspecified region should stretch. But instead we get this fairly confusing layout:
![image](https://user-images.githubusercontent.com/736973/110689900-7d304d00-81a0-11eb-8eec-7b9e807ccbf3.png)