I've got a DataTable in an app like this:
Widget build(BuildContext context) {
return FutureBuilder<List<BudgetItem>>(
future: budgetApiHelper.getBudgetCategories(),
initialData: [],
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
verticalDirection: VerticalDirection.down,
children: <Widget>[
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: DataTable(
sortColumnIndex: 0,
showCheckboxColumn: false,
columnSpacing: 12,
horizontalMargin: 8,
columns: const [
DataColumn(
label: Text("Category"),
numeric: false,
),
DataColumn(
label: Text("Budgeted"),
numeric: false,
),
DataColumn(
label: Text("Used"),
numeric: false,
),
DataColumn(
label: Text("Remaining"),
numeric: false,
),
],
rows: snapshot.data!
.map(
(budgetCategory) => DataRow(
cells: [
DataCell(
Container(
// width: 100,
child: Text(budgetCategory.name),
),
),
DataCell(
Text(
Helpers.formatDollarAmount(
budgetCategory.budgeted),
),
),
DataCell(
Text(
Helpers.formatDollarAmount(budgetCategory.used),
),
),
DataCell(
Text(
Helpers.formatDollarAmount(
budgetCategory.remaining),
),
),
],
),
)
.toList(),
),
),
)
],
);
},
);
}
}
But when I render it in a phone, the columns are sized such that the DataTable overflows the width of the screen:
I could fix this by hardcoding a smaller width for the first column, but I don't want to do that as it would also apply for the desktop/web view. Is there a way to have the first column auto-size such that the whole DataTable fits on the screen?