How to remove padding around cell content during auto row height in Flutter SfDataGrid?

In this article, we will show you how to remove the padding around cell content when using auto row height in Flutter DataTable.

Initialize the SfDataGrid widget with the necessary properties. To remove the padding applied to cells when automatically adjusting row heights based on their content, use the autoFitPadding property from GridColumn. This property controls the padding applied during automatic row height adjustment.

Additionally, in the buildRow method, ensure the padding matches the autoFitPadding by setting padding: EdgeInsets.zero. Adding extra padding may cause rows to have excessive height at the top and bottom.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
      body: SfDataGrid(
        source: employeeDataSource,
        columnWidthMode: ColumnWidthMode.fill,
        onQueryRowHeight: (details) {
          if (details.rowIndex == 0) {
            // Header row
            return 56.0;
          }
          return details.getIntrinsicRowHeight(
            details.rowIndex,
          ); // Autofit row height based on its content
        },
        columns: <GridColumn>[
          GridColumn(
            columnName: 'id',
            autoFitPadding: EdgeInsets.zero, // No extra padding for cells
            label: Container(
              padding: EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: Text('ID'),
            ),
          ),
          GridColumn(
            columnName: 'name',
            autoFitPadding: EdgeInsets.zero,
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Name'),
            ),
          ),
          GridColumn(
            columnName: 'designation',
            autoFitPadding: EdgeInsets.zero,
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Designation', overflow: TextOverflow.ellipsis),
            ),
          ),
          GridColumn(
            columnName: 'salary',
            autoFitPadding: EdgeInsets.zero,
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Salary'),
            ),
          ),
        ],
      ),
    );
  }

You can download this example on GitHub.