SfDataPager class

A widget that provides the paging functionality.

A SfDataPager showspageCount 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();
finalList<Employee>paginatedDataTable=<Employee>[];

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

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: const Text('Syncfusion Flutter DataGrid'),
   ),
   body: Column(
     children: [
       SfDataGrid(source: dataGridSource, columns: [
         GridColumn(
             columnName: 'id',
             label: Container(
                 alignment: Alignment.center,
                 child: Text('ID'))),
         GridColumn(
             columnName: 'name',
             label: Container(
                 alignment: Alignment.center,
                 child: Text('Name'))),
         GridColumn(
             columnName: 'designation',
             label: Container(
                 alignment: Alignment.center,
                 child: Text(
                   'Designation',
                 ))),
         GridColumn(
             columnName: 'salary',
             label: Container(
                 alignment: Alignment.center,
                 child: Text('Salary'))),
       ]),
       SfDataPager(
         pageCount: paginatedDataTable.length / rowsPerPage,
         visibleItemsCount: 5,
         delegate: dataGridSource,
       ),
     ],
   ),
 );
}

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


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

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

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

Constructors

SfDataPager({required double pageCount, required DataPagerDelegate delegate, Key? key, Axis direction = Axis.horizontal, double itemWidth = 50.0, double itemHeight = 50.0, EdgeInsetsGeometry itemPadding = const EdgeInsets.all(5), double navigationItemHeight = 50.0, double navigationItemWidth = 50.0, bool firstPageItemVisible = true, bool lastPageItemVisible = true, bool nextPageItemVisible = true, bool previousPageItemVisible = true, int visibleItemsCount = 5, int initialPageIndex = 0, DataPagerItemBuilderCallback<Widget>? pageItemBuilder, PageNavigationStart? onPageNavigationStart, PageNavigationEnd? onPageNavigationEnd, ValueChanged<int?>? onRowsPerPageChanged, List<int> availableRowsPerPage = const <int>[10, 15, 20], DataPagerController? controller})
Creates a widget describing a datapager.
const

Properties

availableRowsPerPage → List<int>
The options to offer for the rowsPerPage.
final
controller → DataPagerController?
An object that can be used to control the position to which this page is scrolled.
final
delegate → DataPagerDelegate
A delegate that provides the row count details and method to listen the page navigation.
final
direction → Axis
Determines the direction of the data pager whether vertical or horizontal.
final
firstPageItemVisible → bool
Decides whether first page navigation item should be visible.
final
hashCode → int
The hash code for this object.
no setterinherited
initialPageIndex → int
The page to show when first creating the SfDataPager.
final
itemHeight → double
The height of each item except the navigation items such as First, Last, Next and Previous page items.
final
itemPadding → EdgeInsetsGeometry
The padding of each item including navigation items such as First, Last, Next and Previous page items.
final
itemWidth → double
The width of each item except the navigation items such as First, Last, Next and Previous page items.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
lastPageItemVisible → bool
Decides whether last page navigation item should be visible.
final
The height of navigation items such as First, Last, Next and Previous page items.
final
The width of navigation items such as First, Last, Next and Previous page items.
final
nextPageItemVisible → bool
Decides whether next page navigation item should be visible.
final
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.
final
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.
final
onRowsPerPageChanged → ValueChanged<int?>?
Invoked when the user selects a different number of rows per page.
final
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.
final
pageItemBuilder → DataPagerItemBuilderCallback<Widget>?
A builder callback that builds the widget for the specific page Item.
final
previousPageItemVisible → bool
Decides whether previous page navigation item should be visible.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
visibleItemsCount → int
The maximum number of Items to show in view.
final

Methods

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

Operators

operator ==(Object other) → bool
The equality operator.
inherited