|
1 | | -# How-to-load-data-from-firestore-to-Flutter-DataTable-SfDataGrid- |
| 1 | +# How-to-load-data-from-firestore-to-Flutter-DataTable-SfDataGrid- |
| 2 | + |
| 3 | +Load data from the [Firestore](https://firebase.google.com/docs/firestore) to the [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) widget by fetching the data with the required collection name from Firestore. Then, create the rows for the DataGrid from document data. |
| 4 | + |
| 5 | +The following steps explain how to load the data from the Firestore database for Flutter DataGrid: |
| 6 | + |
| 7 | +## STEP 1: |
| 8 | +To get started with Firestore, refer to this [link](https://firebase.google.com/docs/firestore) and create the database in Firestore. In this KB, we have explained using the Firestore data as an example. We will not provide Firebase access files and a key. |
| 9 | + |
| 10 | +## STEP 2: |
| 11 | +To fetch the data from the Firestore, you need to add the following package in the dependencies of pubspec.yaml. |
| 12 | + |
| 13 | +```dart |
| 14 | +dependencies: |
| 15 | + flutter: |
| 16 | + sdk: flutter |
| 17 | + firebase_core: ^1.20.1 |
| 18 | + cloud_firestore: ^3.4.4 |
| 19 | +
|
| 20 | +``` |
| 21 | + |
| 22 | +## STEP 3: |
| 23 | +Import the following library into the flutter application: |
| 24 | + |
| 25 | +```dart |
| 26 | +import 'package:flutter/material.dart'; |
| 27 | +import 'package:cloud_firestore/cloud_firestore.dart'; |
| 28 | +import 'package:firebase_core/firebase_core.dart'; |
| 29 | +import 'package:syncfusion_flutter_datagrid/datagrid.dart'; |
| 30 | +``` |
| 31 | +## STEP 4: |
| 32 | +Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) with all the required details. Fetch the data from the Firestore database by passing the required collection name. In the following sample, we have shown how to perform CRUD operations from the Firestore. If you add the new document to the collection or update/delete the existing document in that collection, we have done the respective operations in the DataGrid based on the DocumentChangeType(added/ removed/ modified) in the document. |
| 33 | + |
| 34 | +```dart |
| 35 | +class SfDataGridDemo extends StatefulWidget { |
| 36 | + const SfDataGridDemo({Key? key}) : super(key: key); |
| 37 | +
|
| 38 | + @override |
| 39 | + SfDataGridDemoState createState() => SfDataGridDemoState(); |
| 40 | +} |
| 41 | +
|
| 42 | +class SfDataGridDemoState extends State<SfDataGridDemo> { |
| 43 | + late EmployeeDataSource employeeDataSource; |
| 44 | + List<Employee> employeeData = []; |
| 45 | +
|
| 46 | + final getData = FirebaseFirestore.instance.collection('Employee').snapshots(); |
| 47 | +
|
| 48 | + Widget _buildDataGrid() { |
| 49 | + return StreamBuilder( |
| 50 | + stream: getData, |
| 51 | + builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) { |
| 52 | + if (snapshot.hasData) { |
| 53 | + if (employeeData.isNotEmpty) { |
| 54 | + |
| 55 | + // to update the value changed at runtime |
| 56 | + getDataGridRowFromDataBase(DocumentChange<Object?> data) { |
| 57 | + return DataGridRow(cells: [ |
| 58 | + DataGridCell<String>(columnName: 'id', value: data.doc['id']), |
| 59 | + DataGridCell<String>( |
| 60 | + columnName: 'name', value: data.doc['name']), |
| 61 | + DataGridCell<String>( |
| 62 | + columnName: 'designation', value: data.doc['designation']), |
| 63 | + DataGridCell<String>( |
| 64 | + columnName: 'salary', value: data.doc['salary'].toString()), |
| 65 | + ]); |
| 66 | + } |
| 67 | +
|
| 68 | + for (var data in snapshot.data!.docChanges) { |
| 69 | + if (data.type == DocumentChangeType.modified) { |
| 70 | + if (data.oldIndex == data.newIndex) { |
| 71 | + employeeDataSource.dataGridRows[data.oldIndex] = |
| 72 | + getDataGridRowFromDataBase(data); |
| 73 | + } |
| 74 | + employeeDataSource.updateDataGridSource(); |
| 75 | + } else if (data.type == DocumentChangeType.added) { |
| 76 | + employeeDataSource.dataGridRows |
| 77 | + .add(getDataGridRowFromDataBase(data)); |
| 78 | + employeeDataSource.updateDataGridSource(); |
| 79 | + } else if (data.type == DocumentChangeType.removed) { |
| 80 | + employeeDataSource.dataGridRows.removeAt(data.oldIndex); |
| 81 | + employeeDataSource.updateDataGridSource(); |
| 82 | + } |
| 83 | + } |
| 84 | + } else { |
| 85 | + for (var data in snapshot.data!.docs) { |
| 86 | + employeeData.add(Employee( |
| 87 | + id: data['id'], |
| 88 | + name: data['name'], |
| 89 | + designation: data['designation'], |
| 90 | + salary: data['salary'].toString())); |
| 91 | + } |
| 92 | + employeeDataSource = EmployeeDataSource(employeeData); |
| 93 | + } |
| 94 | +
|
| 95 | + return SfDataGrid( |
| 96 | + source: employeeDataSource, |
| 97 | + columns: getColumns, |
| 98 | + columnWidthMode: ColumnWidthMode.fill, |
| 99 | + ); |
| 100 | + } else { |
| 101 | + return const Center( |
| 102 | + child: CircularProgressIndicator(), |
| 103 | + ); |
| 104 | + } |
| 105 | + }, |
| 106 | + ); |
| 107 | + } |
| 108 | + @override |
| 109 | + void initState() { |
| 110 | + super.initState(); |
| 111 | + } |
| 112 | +
|
| 113 | + @override |
| 114 | + Widget build(BuildContext context) { |
| 115 | + return Scaffold( |
| 116 | + appBar: AppBar( |
| 117 | + title: const Text('Syncfusion Flutter Datagrid FireStore Demo'), |
| 118 | + ), |
| 119 | + body: _buildDataGrid(), |
| 120 | + ); |
| 121 | + } |
| 122 | +} |
| 123 | +
|
| 124 | +``` |
| 125 | + |
| 126 | +## STEP 5: |
| 127 | +Create a data source class that extends with the [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) for mapping data to the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html). |
| 128 | + |
| 129 | +```dart |
| 130 | +class EmployeeDataSource extends DataGridSource { |
| 131 | + EmployeeDataSource(this.employeeData) { |
| 132 | + _buildDataRow(); |
| 133 | + } |
| 134 | +
|
| 135 | + List<DataGridRow> dataGridRows = []; |
| 136 | + List<Employee> employeeData; |
| 137 | +
|
| 138 | + void _buildDataRow() { |
| 139 | + dataGridRows = employeeData |
| 140 | + .map<DataGridRow>((e) => DataGridRow(cells: [ |
| 141 | + DataGridCell<String>(columnName: 'id', value: e.id), |
| 142 | + DataGridCell<String>(columnName: 'name', value: e.name), |
| 143 | + DataGridCell<String>( |
| 144 | + columnName: 'designation', value: e.designation), |
| 145 | + DataGridCell<String>(columnName: 'salary', value: e.salary), |
| 146 | + ])) |
| 147 | + .toList(); |
| 148 | + } |
| 149 | +
|
| 150 | + @override |
| 151 | + List<DataGridRow> get rows => dataGridRows; |
| 152 | +
|
| 153 | + @override |
| 154 | + DataGridRowAdapter buildRow( |
| 155 | + DataGridRow row, |
| 156 | + ) { |
| 157 | + return DataGridRowAdapter( |
| 158 | + cells: row.getCells().map<Widget>((e) { |
| 159 | + return Container( |
| 160 | + alignment: Alignment.center, |
| 161 | + padding: const EdgeInsets.all(8.0), |
| 162 | + child: Text(e.value.toString()), |
| 163 | + ); |
| 164 | + }).toList()); |
| 165 | + } |
| 166 | +
|
| 167 | + void updateDataGridSource() { |
| 168 | + notifyListeners(); |
| 169 | + } |
| 170 | +} |
| 171 | +
|
| 172 | +``` |
0 commit comments