How can i improve performance of Flutter DataTable Widget? - performance

Question

DataTable(
columnSpacing: 1,
headingRowHeight: 35,
dataRowHeight: 36,
columns: [
DataColumn(
label: Expanded(
child: Container(
color: Color(int.parse(widget.classObj.color)),
padding: Utils.tableHeaderPadding(),
child: Utils.tableHeaderText('No')),
),
),
DataColumn(
label: Expanded(
child: Container(
color: Color(int.parse(widget.classObj.color)),
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 5),
child: Utils.tableHeaderText('Name'),
)),
),
if (studentAttendance.isNotEmpty)
for (var item in studentAttendance)
DataColumn(
label: InkWell(
onTap: () => _createDateDeleteDialogue(
context, _user.emailUid, widget.classObj.classId, item),
child: Container(
color: Color(int.parse(widget.classObj.color)),
padding: Utils.tableHeaderPadding(),
child: Utils.tableHeaderText(item)),
),
),
if (studentAttendance.isNotEmpty) ...[
DataColumn(
label: Container(
color: Color(int.parse(widget.classObj.color)),
padding: Utils.tableHeaderPadding(),
child: Utils.tableHeaderText('Total Present')),
),
DataColumn(
label: Container(
color: Color(int.parse(widget.classObj.color)),
padding: Utils.tableHeaderPadding(),
child: Utils.tableHeaderText('Total Absent')),
),
DataColumn(
label: Container(
color: Color(int.parse(widget.classObj.color)),
padding: Utils.tableHeaderPadding(),
child: Utils.tableHeaderText('Total Attendance(%)')),
),
]
],
rows: students.map((student) {
int presence = student.attendanceList != null
? student.attendanceList.length
: 0;
int absent = studentAttendance.length - presence;
double percent = (presence * 100) / studentAttendance.length;
final attendanceWidget = AttendanceWidgetList(
student: student,
attendance: studentAttendance,
isPresence: presence == 0 ? false : true,
context: context,
classId: widget.classObj.classId,
email: _user.emailUid,
);
return DataRow(
cells: [
DataCell(
Center(
child: Text(
student.id.toString(),
style: Utils.tableSimpleText(),
),
),
),
DataCell(
Container(
margin: const EdgeInsets.only(right: 5),
child: Text(
student.name,
style: const TextStyle(fontSize: 17, color: Colors.black),
),
),
),
if (student.attendanceList != null &&
studentAttendance.isNotEmpty)
if (presence == 0)
...attendanceWidget.attendanceListWidget().map((e) => e)
else if (absent == 0)
...attendanceWidget.attendanceListWidget().map((e) => e)
else
...studentAttendance.map((e) {
if (student.attendanceList.contains(e)) {
return AttendanceWidgetList(
student: student,
attendance: studentAttendance,
isPresence: true,
date: e,
context: context,
classId: widget.classObj.classId,
email: _user.emailUid,
).attendanceSetter();
} else {
return AttendanceWidgetList(
student: student,
attendance: studentAttendance,
isPresence: false,
date: e,
context: context,
classId: widget.classObj.classId,
email: _user.emailUid,
).attendanceSetter();
}
})
else
...attendanceWidget.attendanceListWidget().map((e) => e),
if (studentAttendance.isNotEmpty) ...[
DataCell(
Center(
child: Text(
presence.toString(),
style: Utils.tableSimpleText(),
),
),
),
DataCell(
Center(
child: Text(absent.toString(),
style: Utils.tableSimpleText()),
),
),
DataCell(
Center(
child: Text("${percent.toStringAsFixed(2)} %",
style: Utils.tableSimpleText()),
),
),
],
],
);
}).toList(),
),
I have tried all possible solutions like adding some less widget in datatable.
But DataTable performance isn't increasing.
So, any who have idea how can i increase performance of DataTable
Reference DataTable Video Link : https://drive.google.com/drive/folders/1vpdt0uBK5JV88wHabw6zd-dK76EFF_nR?usp=sharing

Answer 1

Use PaginatedDataTable() instead of DataTable() widget.
A paginated data table shows rows of data per page and provides controls for showing other pages.
PaginatedDataTable Refrence Link
Reference video link