Автоматическое изменение размера столбца Flutter DataTable для предотвращения переполнения
У меня есть DataTable в таком приложении:
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(),
),
),
)
],
);
},
);
}
}
Но когда я визуализирую его на телефоне, столбцы имеют такой размер, что DataTable выходит за пределы ширины экрана:
Я мог бы исправить это, жестко задав меньшую ширину для первого столбца, но я не хочу этого делать, так как это также применимо к рабочему столу/веб-представлению. Есть ли способ автоматически изменить размер первого столбца, чтобы весь DataTable помещался на экране?