How to change the row text style when selecting a row in Flutter DataTable (SfDataGrid)?

We have previously covered the support for changing the color of a selected row in Flutter DataGrid. In this article, we will now focus on modifying the text style of a row when it is selected.

STEP 1: The DataGridSource.buildRow() method is called whenever a row is selected. The data of the selected rows are stored in the dataGridController.selectedRows property. To modify the text color of the selected row, you need to check if the currently selected row exists in the dataGridController.selectedRows collection. If a match is found, you should update the color accordingly. However, if the selected row is different from the current row, the color is set to null.

class EmployeeDataSource extends DataGridSource {
 @override
 DataGridRowAdapter? buildRow(DataGridRow row) {
   Color selectedRowTextColor = Colors.amber;

   return DataGridRowAdapter(
       cells: row.getCells().map<Widget>((dataGridCell) {
     return Container(
         alignment: Alignment.center,
         child: Text(
           dataGridCell.value.toString(),
           style: TextStyle(
               color: dataGridController.selectedRows.contains(row)
                   ? selectedRowTextColor
                   : null),
         ));
   }).toList());
 }
}

STEP 2: Initialize the SfDataGrid widget with all the required properties. To utilize the DataGridController, you need to assign it to the SfDataGrid.controller property.

DataGridController dataGridController = DataGridController();

class SfDataGridDemoState extends State<SfDataGridDemo> {
 late EmployeeDataSource _employeeDataSource;
 List<Employee> _employees = <Employee>[];

 @override
 void initState() {
   super.initState();
   _employees = getEmployeeData();
   _employeeDataSource = EmployeeDataSource(_employees);
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('Flutter SfDataGrid')),
     body: SfDataGridTheme(
       data: SfDataGridThemeData(selectionColor: Colors.purple),
       child: SfDataGrid(
           controller: dataGridController,
           source: _employeeDataSource,
           selectionMode: SelectionMode.multiple,
           columns: getColumns,
           columnWidthMode: ColumnWidthMode.fill),
     ),
   );
 }
}

Download the example from GitHub.

Conclusion
I hope you enjoyed learning about how to change the row text style when selecting a row in Flutter DataTable (SfDataGrid).

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 present and manipulate data.

For current customers, you can check out our Flutter Controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Flutter DataGrid and other Flutter controls.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!