How to change row background color of Flutter DataTable?
The Flutter DataTable widget provides support to change the color of the individual rows based on the requirements.
The following example demonstrates how to change alternate row background color in Flutter DataTable,
STEP 1: Create data source class extends with DataGridSource for mapping data to the SfDataGrid.
Override the buildRow method and return the DataGridRowAdapter. You can use the DataGridRowAdapter.color property to change the color of the row.
To maintain the row background color while perform sorting, you can get the index from effectiveRows property, which holds the sorted collection.
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<Employee> employees}) {
_employees = employees;
updateDataGridRows();
}
List<DataGridRow> dataGridRow = [];
late List<Employee> _employees;
void updateDataGridRows() {
dataGridRow = _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();
}
@override
List<DataGridRow> get rows => dataGridRow;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
Color getBackgroundColor() {
int index = effectiveRows.indexOf(row);
if (index % 2 == 0) {
return Colors.red[100]!;
} else {
return Colors.amber[100]!;
}
}
return DataGridRowAdapter(
color: getBackgroundColor(),
cells: row.getCells().map<Widget>((e) {
return Container(
alignment: Alignment.center,
padding: EdgeInsets.all(8.0),
child: Text(e.value.toString()),
);
}).toList());
}
}
STEP 2: Initialize the SfDataGrid with all the required properties.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: SfDataGrid(
source: employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text(
'ID',
))),
GridColumn(
columnName: 'name',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text('Name'))),
GridColumn(
columnName: 'designation',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'salary',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
),
);
}
You can download this example in GitHub
Conclusion
I hope you enjoyed learning about how to change row background color of Flutter DataTable.
You can refer to our Flutter DataGrid feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter DataGrid documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
