Flutter DataTable column autoresize to prevent overflow

780 views Asked by At

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?

0

There are 0 answers