How to show radio buttons and enable single selection of a row using them in Flutter DataGrid?

In this article, you can learn how to show radio buttons and enable single selection of a row using them in Flutter DataGrid.

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

class MyHomePageState extends State<MyHomePage> {
 
  DataGridController dataGridController = DataGridController();
 
…
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion DataGrid Demo')),
      body: SfDataGrid(
        source: _employeeDataSource,
        selectionMode: SelectionMode.single,
        columns: getColumns,
        controller: dataGridController,
        columnWidthMode: ColumnWidthMode.fill,
      ),
    );
  }
}

STEP 2 :
To achieve this, you can add a new column and DataGridCell specifically for the radio buttons. Within the DataGridSource.buildRow method, you can return the Radio widget for the corresponding column. Additionally, you can implement row selection when tapping on the radio button by utilizing programmatic selection.

class EmployeeDataSource extends DataGridSource {
 
  DataGridController dataGridController;
 
  bool _selectedValue = true;
 
…
 
  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return dataGridCell.columnName == 'SelectionWidget'
          ? Container(
              alignment: Alignment.center,
              child: Radio<bool>(
                    value: getValue(row),
                    groupValue: _selectedValue,
                    onChanged: (bool? value) {
                       _selectedValue = !value!;
                       dataGridController.selectedRow = row;
                  },
               ),
            )
          : Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Text(dataGridCell.value.toString()),
            );
    }).toList());
  }
 
  getValue(DataGridRow row) {
    bool isSelected = dataGridController.selectedRow == row;
    return isSelected;
  }
}

Download the example from GitHub

Conclusion

I hope you enjoyed learning about how to show radio buttons and enable single selection of a row using them in Flutter DataGrid.

You can refer to our Flutter DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

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!