SfDataPager class Null safety

A widget that provides the paging functionality.

A SfDataPager shows pageCount number of pages required to display.

Data is read lazily from a DataPagerDelegate. The widget is presented as card.

The below example shows how to provide the paging support for SfDataGrid. DataGridSource is derived from the DataPagerDelegate by default.

The following code initializes the data source and controller.

PaginatedDataGridSource dataGridSource = PaginatedDataGridSource();
final List<Employee> paginatedDataTable = <Employee>[];

The following code example shows how to  initialize the SfDataPager with SfDataGrid

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Syncfusion Flutter DataGrid'),
    body: Column(
      children: [
        SfDataGrid(source: dataGridSource, columns: [
          GridTextColumn(columnName: 'id', label: Text('ID')),
          GridTextColumn(columnName: 'name', label: Text('Name')),
          GridTextColumn(columnName: 'designation', label: Text('Designation')),
          GridTextColumn(columnName: 'salary', label: Text('Salary')),
          pageCount: paginatedDataTable.length / rowsPerPage,
          visibleItemsCount: 5,
          delegate: dataGridSource,

The following code example shows how to initialize the DataGridSource to SfDataGrid

class PaginatedDataGridSource extends DataGridSource {
  List<DataGridRow> get rows => _paginatedData
      .map<DataGridRow>((dataRow) => DataGridRow(cells: [
            DataGridCell<int>(columnName: 'id', value: dataRow.id),
            DataGridCell<String>(columnName: 'name', value: dataRow.name),
                columnName: 'designation', value: dataRow.designation),
            DataGridCell<int>(columnName: 'salary', value: dataRow.salary),

  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataCell) {
      return Text(dataCell.value.toString());

  Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
    startRowIndex = newPageIndex * rowsPerPage;
    endRowIndex = startRowIndex + rowsPerPage;
    _paginatedData =  paginatedDataTable
        .getRange(startRowIndex, endRowIndex)
        .toList(growable: false);
    return true;



SfDataPager({required double pageCount, required DataPagerDelegate delegate, Key? key, Axis direction = Axis.horizontal, int visibleItemsCount = 5, int initialPageIndex = 0, DataPagerItemBuilderCallback<Widget>? pageItemBuilder, PageNavigationStart? onPageNavigationStart, PageNavigationEnd? onPageNavigationEnd, DataPagerController? controller})
Creates a widget describing a datapager. [...]


controller DataPagerController?
An object that can be used to control the position to which this page is scrolled.
delegate DataPagerDelegate
A delegate that provides the row count details and method to listen the page navigation. [...]
direction Axis
Determines the direction of the data pager whether vertical or horizontal. [...]
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
initialPageIndex int
The page to show when first creating the SfDataPager. [...]
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
onPageNavigationEnd PageNavigationEnd?
Called when page is successfully navigated. Typically you can use this callback to call the setState() to hide the loading indicator once data is successfully retrieved from services.
onPageNavigationStart PageNavigationStart?
Called when page is being navigated. Typically you can use this callback to call the setState() to display the loading indicator while retrieving the rows from services.
pageCount double
The number of pages required to display in SfDataPager. Calculate the number of pages by dividing the total number of items available by number of items displayed in a page. [...]
pageItemBuilder DataPagerItemBuilderCallback<Widget>?
A builder callback that builds the widget for the specific page Item.
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
visibleItemsCount int
The maximum number of Items to show in view.


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
createState() → _SfDataPagerState
Creates the mutable state for this widget at a given location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object. [...]
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited