How to do infinite scrolling in Flutter DataTable (SfDataGrid)?
The Syncfusion Flutter DataTable widget provides support to perform infinite scrolling by using loadMoreViewBuilder property. Infinite Scrolling is an approach that can be used to load more rows to the datagrid whenever the datagrid reaches the bottom.
The following example demonstrates how to perform infinite scrolling by showing the circular progress indicator until the rows are loaded when the datagrid reaches the bottom,
STEP 1: Create data source class extends with DataGridSource for mapping data to the SfDataGrid and override handleLoadMoreRows method to load more rows when performing infinite scrolling.
class _EmployeeDataSource extends DataGridSource {
_EmployeeDataSource(
{required List<Employee> employeeData,
required Function(List<Employee>, int) generateList}) {
_employeeData = employeeData;
_generateList = generateList;
}
late List<Employee> _employeeData;
late Function(List<Employee>, int) _generateList;
@override
List<DataGridRow> get rows => _employeeData.map<DataGridRow>((e) {
return DataGridRow(cells: [
DataGridCell(columnName: 'id', value: e.id),
DataGridCell(columnName: 'name', value: e.name),
DataGridCell(columnName: 'designation', value: e.designation),
DataGridCell(columnName: 'salary', value: e.salary),
]);
}).toList(growable: false);
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(cells: [
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
row.getCells()[0].value.toString(),
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
row.getCells()[1].value,
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
row.getCells()[2].value,
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
row.getCells()[3].value.toString(),
overflow: TextOverflow.ellipsis,
),
),
]);
}
@override
Future<void> handleLoadMoreRows() async {
await Future.delayed(Duration(seconds: 5));
_employeeData = _generateList(_employeeData, 15);
notifyListeners();
}
}
STEP 2: Initialize the SfDataGrid with all the required properties and you can use the FutureBuilder widget to show the progress indicator in the loadMoreViewBuilder method.
The handleLoadMoreRows can be called to load more rows from this builder by using the loadMoreRows function which is passed as a parameter to loadMoreViewBuilder.
List<Employee> _generateList(List<Employee> employeeData, int count) {
final Random random = Random();
final int startIndex = employeeData.isNotEmpty ? employeeData.length : 0,
endIndex = startIndex + count;
for (int i = startIndex; i < endIndex; i++) {
employeeData.add(Employee(
1000 + i,
names[i < names.length ? i : random.nextInt(names.length - 1)],
designation[random.nextInt(designation.length - 1)],
10000 + random.nextInt(1000)));
}
return employeeData;
}
@override
void initState() {
_populateData();
employeeDataSource = _EmployeeDataSource(
employeeData: employeeData, generateList: _generateList);
super.initState();
}
Widget _buildProgressIndicator() {
return Container(
height: 60.0,
alignment: Alignment.center,
width: double.infinity,
decoration: BoxDecoration(
border: BorderDirectional(
top: BorderSide(
width: 1.0,
))),
child: Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Container(
child: CircularProgressIndicator(
backgroundColor: Colors.transparent,
))));
}
Widget _buildLoadMoreView(BuildContext context, LoadMoreRows loadMoreRows) {
Future<String> loadRows() async {
// Call the loadMoreRows function to call the
// DataGridSource.handleLoadMoreRows method. So, additional
// rows can be added from handleLoadMoreRows method.
await loadMoreRows();
return Future<String>.value('Completed');
}
return FutureBuilder<String>(
initialData: 'Loading',
future: loadRows(),
builder: (context, snapShot) {
return snapShot.data == 'Loading'
? _buildProgressIndicator()
: SizedBox.fromSize(size: Size.zero);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DataGrid Sample'),
),
body: SfDataGrid(
source: employeeDataSource,
loadMoreViewBuilder: _buildLoadMoreView,
columns: [
GridTextColumn(
columnName: 'id',
columnWidthMode: ColumnWidthMode.fill,
label: Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerRight,
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
))),
GridTextColumn(
columnName: 'name',
label: Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerLeft,
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
))),
GridTextColumn(
columnName: 'designation',
columnWidthMode: ColumnWidthMode.fill,
label: Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerLeft,
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridTextColumn(
columnName: 'salary',
label: Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
)))
]));
}
You can download this example in GitHub.
Conclusion
I hope you enjoyed learning about how to do infinite scrolling in Flutter DataTable (SfDataGrid).
You can refer to our Flutter Datagrid feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter DataGrid documentation to understand how to create and manipulate data.
For current customers, you can check out our File Formats from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our all platforms.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
