|
1 | | -# how-to-change-the-row-text-style-when-selecting-a-row-in-Flutter-DataTable |
2 | | -How to change the row text style when selecting a row in Flutter DataTable (SfDataGrid)? |
| 1 | +# How to change the row text style when selecting a row in Flutter DataTable (SfDataGrid) |
| 2 | + |
| 3 | +We have previously covered the support to changing the color of a selected row in [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid). In this article, we will now focus on modifying the text style of a row when it is selected. |
| 4 | + |
| 5 | +## STEP 1: |
| 6 | +The [DataGridRowAdapter](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridRowAdapter-class.html).buildRow() method is called whenever a row is selected. The data of the selected rows is stored in the dataGridController.selectedRows property. To modify the text color of the selected row, we need to check if the currently selected row exists in the dataGridController.selectedRows collection. If a match is found, we update the color accordingly. However, if the selected row is different from the current row, the color is set to null. |
| 7 | + |
| 8 | +```dart |
| 9 | +class EmployeeDataSource extends DataGridSource { |
| 10 | + @override |
| 11 | + DataGridRowAdapter? buildRow(DataGridRow row) { |
| 12 | + Color selectedRowTextColor = Colors.amber; |
| 13 | +
|
| 14 | + return DataGridRowAdapter( |
| 15 | + cells: row.getCells().map<Widget>((dataGridCell) { |
| 16 | + return Container( |
| 17 | + alignment: Alignment.center, |
| 18 | + child: Text( |
| 19 | + dataGridCell.value.toString(), |
| 20 | + style: TextStyle( |
| 21 | + color: dataGridController.selectedRows.contains(row) |
| 22 | + ? selectedRowTextColor |
| 23 | + : null), |
| 24 | + )); |
| 25 | + }).toList()); |
| 26 | + } |
| 27 | +} |
| 28 | +
|
| 29 | +``` |
| 30 | +## STEP 2: |
| 31 | +Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all the required properties. To utilize the [DataGridController](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController-class.html), we need to assign it to the [SfDataGrid.controller](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/controller.html) property. |
| 32 | + |
| 33 | +```dart |
| 34 | +import 'package:flutter/material.dart'; |
| 35 | +import 'package:syncfusion_flutter_datagrid/datagrid.dart'; |
| 36 | +import 'package:syncfusion_flutter_core/theme.dart'; |
| 37 | +
|
| 38 | +DataGridController dataGridController = DataGridController(); |
| 39 | +
|
| 40 | +class SfDataGridDemoState extends State<SfDataGridDemo> { |
| 41 | + late EmployeeDataSource _employeeDataSource; |
| 42 | + List<Employee> _employees = <Employee>[]; |
| 43 | +
|
| 44 | + @override |
| 45 | + void initState() { |
| 46 | + super.initState(); |
| 47 | + _employees = getEmployeeData(); |
| 48 | + _employeeDataSource = EmployeeDataSource(_employees); |
| 49 | + } |
| 50 | +
|
| 51 | + @override |
| 52 | + Widget build(BuildContext context) { |
| 53 | + return Scaffold( |
| 54 | + appBar: AppBar(title: const Text('Flutter SfDataGrid')), |
| 55 | + body: SfDataGridTheme( |
| 56 | + data: SfDataGridThemeData(selectionColor: Colors.purple), |
| 57 | + child: SfDataGrid( |
| 58 | + controller: dataGridController, |
| 59 | + source: _employeeDataSource, |
| 60 | + selectionMode: SelectionMode.multiple, |
| 61 | + columns: getColumns, |
| 62 | + columnWidthMode: ColumnWidthMode.fill), |
| 63 | + ), |
| 64 | + ); |
| 65 | + } |
| 66 | +} |
| 67 | +
|
| 68 | +``` |
0 commit comments