Footer in Flutter DataGrid (SfDataGrid)

8 Jul 202612 minutes to read

The footer row is an additional row that displays below the last data row in the grid. Widgets can be displayed in the footer row by setting the SfDataGrid.footer property.

Note: Before implementing the footer functionality, ensure you have set up the SfDataGrid with a valid DataGridSource and configured the necessary columns.

@override
  Widget build(BuildContext context) {
    return SfDataGrid(
      source: _employeeDataSource,
      footer: Container(
        color: Colors.grey[400],
        child: Center(
          child: Text(
            'FOOTER VIEW',
            style: TextStyle(fontWeight: FontWeight.bold),
          )
        )
      ),
      columns: <GridColumn>[
        GridColumn(
          columnName: 'id',
          label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text('ID')
          )
        ),
        GridColumn(
          columnName: 'name',
          label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text('Name')
          )
        ),
        GridColumn(
          columnName: 'designation',
          label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text(
              'Designation',
              overflow: TextOverflow.ellipsis,
            )
          )
        ),
        GridColumn(
          columnName: 'salary',
          label: Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text('Salary')
          )
        ),
      ]
    );
  }

flutter datagrid shows footer

The footer row height can be customized by using the SfDataGrid.footerHeight property. The default height of the footer row is 49.0 logical pixels.

NOTE: When setting a custom footer height, ensure it is sufficient to display all the content without text overflow or clipping.

@override
  Widget build(BuildContext context) {
    return SfDataGrid(
        source: _employeeDataSource,
        footerHeight: 60.0,
        footer: Container(
            color: Colors.grey[400],
            child: Center(
                child: Text(
              'FOOTER VIEW',
              style: TextStyle(fontWeight: FontWeight.bold),
            ))),
        columns: <GridColumn>[
          GridColumn(
              columnName: 'id',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text(
                    'ID',
                  ))),
          GridColumn(
              columnName: 'name',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Name'))),
          GridColumn(
              columnName: 'designation',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ))),
          GridColumn(
              columnName: 'salary',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Salary'))),
        ]);
  }

flutter datagrid shows footer height customization

By default, the footer row is displayed below the last data row. To keep the footer visible at the bottom of the grid while scrolling vertically, set the SfDataGrid.footerFrozenRowsCount property to 1.

NOTE: Setting footerFrozenRowsCount to 1 freezes the footer row, ensuring it remains visible when users scroll through the data, similar to freezing header rows.

@override
  Widget build(BuildContext context) {
    return SfDataGrid(
        source: _employeeDataSource,
        footerFrozenRowsCount: 1,
        footer: Container(
            color: Colors.grey[400],
            child: Center(
                child: Text(
              'FOOTER VIEW',
              style: TextStyle(fontWeight: FontWeight.bold),
            ))),
        columns: <GridColumn>[
          GridColumn(
              columnName: 'id',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text(
                    'ID',
                  ))),
          GridColumn(
              columnName: 'name',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Name'))),
          GridColumn(
              columnName: 'designation',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ))),
          GridColumn(
              columnName: 'salary',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Salary'))),
        ]);
  }

flutter datagrid shows footer always on bottom