Modified the sample as per new API structure.

Author: ashok-kuvaraja

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:collection/collection.dart';
 import 'package:syncfusion_flutter_datagrid/datagrid.dart';
 
 void main() {
@@ -17,53 +18,82 @@ class MyApp extends StatelessWidget {
 }
 
 class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key}) : super(key: key);
+  MyHomePage({Key? key}) : super(key: key);
 
   @override
   _MyHomePageState createState() => _MyHomePageState();
 }
 
-final List<Employee> _employees = <Employee>[];
-
-final EmployeeDataSource _employeeDataSource = EmployeeDataSource();
-
 class _MyHomePageState extends State<MyHomePage> {
+  late EmployeeDataSource _employeeDataSource;
+
   @override
   void initState() {
     super.initState();
-    populateData();
+    _employeeDataSource = EmployeeDataSource(employees: populateData());
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('Syncfusion Flutter DataGrid'),
-      ),
-      body: SfDataGrid(
-        source: _employeeDataSource,
-        allowSorting: true,
-        columns: <GridColumn>[
-          GridNumericColumn(mappingName: 'id', headerText: 'ID'),
-          GridTextColumn(mappingName: 'name', headerText: 'Name'),
-          GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
-          GridNumericColumn(mappingName: 'salary', headerText: 'Salary'),
-        ],
-      ),
-    );
+        appBar: AppBar(
+          title: const Text('Syncfusion Flutter DataGrid'),
+        ),
+        body: SfDataGrid(
+          allowSorting: true,
+          source: _employeeDataSource,
+          columns: <GridColumn>[
+            GridTextColumn(
+                columnName: 'id',
+                label: Container(
+                    padding: EdgeInsets.all(16.0),
+                    alignment: Alignment.center,
+                    child: Text(
+                      'ID',
+                    ))),
+            GridTextColumn(
+                columnName: 'name',
+                label: Container(
+                    padding: EdgeInsets.all(8.0),
+                    alignment: Alignment.center,
+                    child: Text('Name'))),
+            GridTextColumn(
+                columnName: 'designation',
+                label: Container(
+                    padding: EdgeInsets.all(8.0),
+                    alignment: Alignment.center,
+                    child: Text(
+                      'Designation',
+                      overflow: TextOverflow.ellipsis,
+                    ))),
+            GridTextColumn(
+                columnName: 'salary',
+                label: Container(
+                    padding: EdgeInsets.all(8.0),
+                    alignment: Alignment.center,
+                    child: Text('Salary'))),
+          ],
+        ));
   }
 
-  void populateData() {
-    _employees.add(Employee(10001, 'James', 'Project Lead', 20000));
-    _employees.add(Employee(10002, 'Kathryn', 'Manager', 30000));
-    _employees.add(Employee(10003, 'Lara', 'Developer', 15000));
-    _employees.add(Employee(10004, 'Michael', 'Designer', 15000));
-    _employees.add(Employee(10005, 'martin', 'Developer', 15000));
-    _employees.add(Employee(10006, 'newberry', 'Developer', 15000));
-    _employees.add(Employee(10007, 'Balnc', 'Developer', 15000));
-    _employees.add(Employee(10008, 'Perry', 'Developer', 15000));
-    _employees.add(Employee(10009, 'Gable', 'Developer', 15000));
-    _employees.add(Employee(10010, 'grimes', 'Developer', 15000));
+  List<Employee> populateData() {
+    return <Employee>[
+      Employee(10001, 'James', 'Project Lead', 20000),
+      Employee(10002, 'Kathryn', 'Manager', 30000),
+      Employee(10003, 'Lara', 'Developer', 15000),
+      Employee(10004, 'Michael', 'Designer', 15000),
+      Employee(10005, 'martin', 'Developer', 15000),
+      Employee(10006, 'newberry', 'Developer', 15000),
+      Employee(10007, 'Balnc', 'Developer', 15000),
+      Employee(10008, 'Perry', 'Developer', 15000),
+      Employee(10009, 'Gable', 'Developer', 15000),
+      Employee(10010, 'grimes', 'Developer', 15000),
+      Employee(10011, 'Lara', 'Developer', 15000),
+      Employee(10012, 'Michael', 'Designer', 15000),
+      Employee(10013, 'martin', 'Developer', 15000),
+      Employee(10014, 'newberry', 'Developer', 15000),
+      Employee(10015, 'Balnc', 'Developer', 15000),
+    ];
   }
 }
 
@@ -79,46 +109,61 @@ class Employee {
   final int salary;
 }
 
-class EmployeeDataSource extends DataGridSource<Employee> {
+class EmployeeDataSource extends DataGridSource {
+  EmployeeDataSource({required List<Employee> employees}) {
+    _employeeData = employees
+        .map<DataGridRow>((e) => DataGridRow(cells: [
+              DataGridCell<int>(columnName: 'id', value: e.id),
+              DataGridCell<String>(columnName: 'name', value: e.name),
+              DataGridCell<String>(
+                  columnName: 'designation', value: e.designation),
+              DataGridCell<int>(columnName: 'salary', value: e.salary),
+            ]))
+        .toList();
+  }
+
+  List<DataGridRow> _employeeData = [];
+
   @override
-  List<Employee> get dataSource => _employees;
+  List<DataGridRow> get rows => _employeeData;
 
   @override
-  Object getValue(Employee employee, String columnName) {
-    switch (columnName) {
-      case 'id':
-        return employee.id;
-        break;
-      case 'name':
-        return employee.name;
-        break;
-      case 'salary':
-        return employee.salary;
-        break;
-      case 'designation':
-        return employee.designation;
-        break;
-      default:
-        return ' ';
-        break;
-    }
+  DataGridRowAdapter buildRow(DataGridRow row) {
+    return DataGridRowAdapter(
+        cells: row.getCells().map<Widget>((e) {
+      return Container(
+        alignment: Alignment.center,
+        padding: EdgeInsets.all(8.0),
+        child: Text(e.value.toString()),
+      );
+    }).toList());
   }
 
   @override
-  int compare(Employee a, Employee b, SortColumnDetails sortColumn) {
+  int compare(DataGridRow? a, DataGridRow? b, SortColumnDetails sortColumn) {
     if (sortColumn.name == 'name') {
+      final String? value1 = a
+          ?.getCells()
+          .firstWhereOrNull((element) => element.columnName == sortColumn.name)
+          ?.value
+          .toString();
+      final String? value2 = b
+          ?.getCells()
+          .firstWhereOrNull((element) => element.columnName == sortColumn.name)
+          ?.value
+          .toString();
+
+      if (value1 == null || value2 == null) {
+        return 0;
+      }
+
       if (sortColumn.sortDirection == DataGridSortDirection.ascending) {
-        if (a.name == null || b.name == null)
-          return a.name == null ? -1 : 1;
-        else
-          return a.name.toLowerCase().compareTo(b.name.toLowerCase());
+        return value1.toLowerCase().compareTo(value2.toLowerCase());
       } else {
-        if (a.name == null || b.name == null)
-          return a.name == null ? 1 : -1;
-        else
-          return b.name.toLowerCase().compareTo(a.name.toLowerCase());
+        return value2.toLowerCase().compareTo(value1.toLowerCase());
       }
     }
+
     return super.compare(a, b, sortColumn);
   }
 }

pubspec.yaml

@@ -18,12 +18,12 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.7.0 <3.0.0"
+  sdk: ">=2.12.0 <3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
-  syncfusion_flutter_datagrid: ^18.3.40-beta
+  syncfusion_flutter_datagrid: ^19.1.54-beta.1
 
 
   # The following adds the Cupertino Icons font to your application.