Row Height Customization — Flutter DataGrid

Overview

SfDataGrid supports fixed row heights, autofit (intrinsic) heights, per-TextStyle heights, formatted-value heights, header row height, data row height, and programmatic row refresh via DataGridController.refreshRow.

Set Height for a Specific Row

Use onQueryRowHeight callback. Row index 0 = column header row:

SfDataGrid(
    source: _employeeDataSource,
    onQueryRowHeight: (RowHeightDetails details) {
      return details.rowIndex == 0 ? 70.0 : 49.0;
    },
    columns: columns)

Autofit Row Height Based on Content

Use RowHeightDetails.getIntrinsicRowHeight to size rows to their content:

SfDataGrid(
    source: _employeeDataSource,
    onQueryRowHeight: (RowHeightDetails details) {
      return details.getIntrinsicRowHeight(details.rowIndex);
    },
    columns: columns)

Autofit Options

// Exclude specific columns from height calculation
details.getIntrinsicRowHeight(details.rowIndex,
    excludedColumns: ['City'],
    canIncludeHiddenColumns: true)   // include hidden columns in calculation

Autofit with Custom TextStyle

Override ColumnSizer methods to calculate height against a specific TextStyle:

class CustomColumnSizer extends ColumnSizer {
  @override
  double computeHeaderCellHeight(GridColumn column, TextStyle textStyle) {
    if (column.columnName == 'Contact Name' || column.columnName == 'City') {
      textStyle = TextStyle(fontWeight: FontWeight.bold, fontStyle: FontStyle.italic);
    }
    return super.computeHeaderCellHeight(column, textStyle);
  }

  @override
  double computeCellHeight(GridColumn column, DataGridRow row,
      Object? cellValue, TextStyle textStyle) {
    if (column.columnName == 'Contact Name' || column.columnName == 'City') {
      textStyle = TextStyle(fontWeight: FontWeight.bold, fontStyle: FontStyle.italic);
    }
    return super.computeCellHeight(column, row, cellValue, textStyle);
  }
}

// Use with:
SfDataGrid(
    source: _employeeDataSource,
    columnSizer: CustomColumnSizer(),
    onQueryRowHeight: (RowHeightDetails details) => details.getIntrinsicRowHeight(details.rowIndex),
    columns: columns)

Autofit with Formatted Values

Override computeCellHeight to pass the formatted display value instead of raw value:

class CustomColumnSizer extends ColumnSizer {
  @override
  double computeCellHeight(GridColumn column, DataGridRow row,
      Object? cellValue, TextStyle textStyle) {
    if (column.columnName == 'Date of Birth') {
      cellValue = DateFormat.yMMMMd('en_US').format(cellValue as DateTime);
    } else if (column.columnName == 'Salary') {
      cellValue = NumberFormat.simpleCurrency(decimalDigits: 0).format(cellValue);
    }
    return super.computeCellHeight(column, row, cellValue, textStyle);
  }
}

Set Header Row Height

SfDataGrid(
    source: _employeeDataSource,
    headerRowHeight: 70,
    columns: columns)

Applies to the column header row and all stacked header rows.

Set Data Row Height

SfDataGrid(
    source: _employeeDataSource,
    rowHeight: 60,
    columns: columns)

Applies to all data rows (does not affect the header row).

Refresh Row Height Programmatically

Use DataGridController.refreshRow after updating row data:

// Refresh only row data
_controller.refreshRow(0);

// Refresh row data AND recalculate its height
_controller.refreshRow(0, recalculateRowHeight: true);

// After calling refreshRow, update the data source:
_employeeDataSource.buildDataGridSource(_employees);
_employeeDataSource.updateDataGridSource();

When recalculateRowHeight: true, the onQueryRowHeight callback will be triggered for that row, allowing the height to be recalculated.

Key Property Reference

SfDataGrid Properties

Property	Type	Default	Description
`onQueryRowHeight`	`double Function(RowHeightDetails)?`	`null`	Callback to provide height per row index
`headerRowHeight`	`double`	56.0	Height of column header row and stacked headers
`rowHeight`	`double`	49.0	Height of all data rows
`columnSizer`	`ColumnSizer?`	`null`	Custom column/row sizer for autofit calculations

RowHeightDetails

Property/Method	Description
`rowIndex`	Index of the row being queried
`rowHeight`	Default height for this row
`getIntrinsicRowHeight(rowIndex, {excludedColumns, canIncludeHiddenColumns})`	Calculate height to fit content

DataGridController Methods

Method	Parameters	Description
`refreshRow(rowIndex, {recalculateRowHeight})`	`int`, `bool` (default false)	Refresh row data; optionally recalculate height

4.7 KiB Raw Blame History