Автоматическое изменение размера столбца 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 помещался на экране?

0 ответов

Другие вопросы по тегам