How to get checked row details in Flutter DataTable (SfDataGrid)?

In this article, we will show how to get checked row details in Flutter DataTable.

Initialize the SfDataGrid widget with the necessary properties. The onCheckboxValueChanged callback is triggered when a checkbox is selected or deselected, either by tapping the checkbox or by selecting or deselecting a row (i.e., when the checkbox value changes). The callback provides the checked value, the row, and the row type.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
      body: SfDataGrid(
        showCheckboxColumn: true,
        onCheckboxValueChanged: (details) {
          final rowType = details.rowType;
          final value =
              details.row
                  ?.getCells()
                  .firstWhere((cell) => cell.columnName == 'id')
                  .value
                  .toString();
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('Details'),
                content: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Checkbox Value: ${details.value}'),
                    SizedBox(height: 8),
                    Text('Row Type: $rowType'),
                    SizedBox(height: 8),
                    Text('Value: $value'),
                  ],
                ),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('OK'),
                  ),
                ],
              );
            },
          );
        },
        selectionMode: SelectionMode.multiple,
        source: employeeDataSource,
        columnWidthMode: ColumnWidthMode.fill,
        columns: <GridColumn>[
          GridColumn(
            columnName: 'id',
            label: Container(
              padding: EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: Text('ID'),
            ),
          ),
          GridColumn(
            columnName: 'name',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Name'),
            ),
          ),
          GridColumn(
            columnName: 'designation',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Designation', overflow: TextOverflow.ellipsis),
            ),
          ),
          GridColumn(
            columnName: 'salary',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Salary'),
            ),
          ),
        ],
      ),
    );
  }

You can download this example on GitHub.