[Flutter] Is there anyway to optimize the table rendering in pluto_grid for huge number of...

I'm working on a Flutter project where I need to display a data table using the PlutoGrid widget. The table is rendering data from a list of maps, and each map contains information about a case (like eye color, missing date, etc.). And right now there are not much data in the table. In case of even 2-3 rows it renders very slowly. And these are just few columns. The actual data has way too many columns. So I am not even sure, how much time it is going to take then Below is the code snippet I am using:

class WebCaseList extends StatelessWidget {
final List<Map<String, dynamic>> caseList;

WebCaseList({required this.caseList});

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 20.0, top: 20, left: 20),
child: PlutoGrid(
columns: _buildColumns(),
rows: _buildRows(),
mode: PlutoGridMode.readOnly,
onChanged: (PlutoGridOnChangedEvent event) {},
configuration: PlutoGridConfiguration(
style: PlutoGridStyleConfig(
menuBackgroundColor: Color.fromRGBO(43, 58, 85, 1),
rowHeight: 70,
defaultColumnTitlePadding: EdgeInsets.only(left: 20),
enableCellBorderHorizontal: true,
gridBorderRadius: BorderRadius.circular(8),
gridBorderColor: Color(0xFFE2E9EA),
enableGridBorderShadow: true,
enableCellBorderVertical: false,
),
columnSize: const PlutoGridColumnSizeConfig(
autoSizeMode: PlutoAutoSizeMode.scale,
resizeMode: PlutoResizeMode.normal),
scrollbar: PlutoGridScrollbarConfig(
scrollbarThickness: 8,
scrollbarRadius: Radius.circular(8),
scrollBarColor: Color(0XFF40038D),
),
),
),
);
}

List<PlutoColumn> _buildColumns() {
return [
PlutoColumn(
title: 'Eye Natural Color',
field: 'eyeNaturalColor',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Missing Date',
field: 'missingDate',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Sex',
field: 'sex',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Case Number',
field: 'caseNumber',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Case Manager',
field: 'caseManager',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'First Name',
field: 'firstName',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Middle Name',
field: 'middleName',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Last Name',
field: 'lastName',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Case Type',
field: 'caseType',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Request Type',
field: 'requestType',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'City',
field: 'city',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'ZIP',
field: 'zip',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'State',
field: 'state',
type: PlutoColumnType.text(),
minWidth: 150),
PlutoColumn(
title: 'Country',
field: 'country',
type: PlutoColumnType.text(),
minWidth: 150),
];
}

List<PlutoRow> _buildRows() {
return caseList.map((caseItem) {
return PlutoRow(cells: {
'eyeNaturalColor': PlutoCell(value: caseItem['eyeNaturalColor'] ?? ''),
'sex': PlutoCell(value: caseItem['sex'] ?? ''),
'missingDate': PlutoCell(value: caseItem['missingDate'] ?? ''),
'caseNumber': PlutoCell(value: caseItem['caseNumber'] ?? ''),
'caseManager': PlutoCell(value: caseItem['caseManager'] ?? ''),
'firstName': PlutoCell(value: caseItem['firstName'] ?? ''),
'middleName': PlutoCell(value: caseItem['middleName'] ?? ''),
'lastName': PlutoCell(value: caseItem['lastName'] ?? ''),
'caseType': PlutoCell(value: caseItem['caseType'] ?? ''),
'requestType': PlutoCell(value: caseItem['requestType'] ?? ''),
'city': PlutoCell(value: caseItem['city'] ?? ''),
'zip': PlutoCell(value: caseItem['zip'] ?? ''),
'state': PlutoCell(value: caseItem['state'] ?? ''),
'country': PlutoCell(value: caseItem['country'] ?? ''),
});
}).toList();
}
}

Continue reading...