What's New in 2020 Volume 3: Flutter DataGrid

What's New in 2020 Volume 3: Flutter DataGrid

DataGrid provides built-in support to sort one or more columns in ascending or descending order. It also provides support to tri-state sorting, which helps you to unsort the data to get its original order. You can also show numbers along with the sort icon to indicate the sorted orders.

We at Syncfusion introduced our Flutter DataGrid in the 2020 Volume 2 release with a limited set of features. Now, we have added some more features to let you use the DataGrid widget with more customization options. The 2020 Volume 3 release brings the following features for the Flutter DataGrid:


Paging is an essential feature to load a large amount of data in multiple pages. Our DataGrid already supported loading large amounts of data. But paging is useful when loading the data on demand based on the data availability. For that, we have introduced the DataPager widget. You can place this widget wherever you want to load data in pages. You can go through this UG documentation for getting started with the DataPager with DataGrid.

Refer to the following code example.

List<OrderInfo> paginatedDataSource = [];

final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();


Widget build(BuildContext context) {

return Scaffold(

body: LayoutBuilder(

builder: (context, constraint) {

return Column(

children: [


height: constraint.maxHeight - 60,

width: constraint.maxWidth,

child: SfDataGrid(

source: _orderInfoDataSource,

columnWidthMode: ColumnWidthMode.fill,

columns: <GridColumn>[


mappingName: 'orderID'``, headerText: 'Order ID'``),


mappingName: 'customerID'``,

headerText: 'Customer Name'``),


mappingName: name, headerText: 'Name),


mappingName: '``freight``', headerText: '``Freight``'),




height: 60,

child: SfDataPager(

delegate: _orderInfoDataSource,

rowsPerPage: 20,

direction: Axis.horizontal,









class OrderInfoDataSource extends DataGridSource<OrderInfo> {


List<OrderInfo> get dataSource => paginatedDataSource;


Object getValue(OrderInfo orderInfos, String columnName) {

switch (columnName) {

case '``orderID``':

return orderInfos.orderID;


case '``customerID``':

return orderInfos.customerID;


case '``freight``':

return orderInfos.freight;


case name:

return orderInfos.name;



return '``';





int get rowCount => orderInfos.length;


Future<bool> handlePageChange(int oldPageIndex, int newPageIndex,

int startRowIndex, int rowsPerPage) async {

int endIndex = startRowIndex + rowsPerPage;

if (endIndex > orderInfos.length) {

endIndex = orderInfos.length - 1;


paginatedDataSource = List.from(

orderInfos.getRange(startRowIndex, endIndex).toList(growable: false));


return true;



datagrid flutter mobile syncfusion ui web what's new android ios user interface what's new

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Introducing a Super-Fast DataGrid Widget for Flutter

Data grids play a vital role in software development in all platforms, and Flutter is not an exception in this. So, we developed a DataGrid widget for the Flutter platform that is very fast and is capable of handling very large amounts of data. This DataGrid widget in Flutter is now available in our

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

What’s New in 2020 Volume 3: Flutter Event Calendar

Our last release included some impressive features in the Calendar widget, such as a schedule view and special time region. Now, Syncfusion is pleased to announce the availability of several important enhancements in the Flutter event calendar in our Essential Studio 2020 Volume 3 release. Here are

What’s New in 2020 Volume 3: Syncfusion Flutter Maps

In the Essential Studio 2020 Volume 2, release, we introduced the new Maps widget for the Flutter platform. At Syncfusion, we always look forward to feedback from the developer community to improve our products in every release. Likewise, in our recent Essential Studio 2020 Volume 3 release, we have

Top iOS Mobile App Development Agency in New York

Are you looking for a [Top iOS Mobile App Development Agency in New York]**(https://www.appcluesinfotech.com/ios-app-develop**ment-company/ "Top iOS Mobile App Development Agency in New York") for your app projects? Then AppClues Infotech is the...