How to show CheckBox column in Flutter DataTable (SfDataGrid)?
The Flutter DataTable widget provides support to load any type of widget in each cell. Show the checkbox column by returning the Checkbox widget for specific column which requires the Checkbox operation in DataGridSource.buildRow method.
STEP 1: Create data source class extends with DataGridSource for mapping data to the SfDataGrid. To update the underlying value of cell, use the Checkbox widget’s onChanged method. Then, call notifyDataSourceListeners() after updating the checkbox state value into a collection.
class ProductDataSource extends DataGridSource {
ProductDataSource({required this.employeeData}) {
updateDataGridRow();
}
void updateDataGridRow() {
_dataGridRow = employeeData
.map<DataGridRow>((e) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: e.id),
DataGridCell<String>(columnName: 'product', value: e.product),
DataGridCell<int>(columnName: 'price', value: e.price),
DataGridCell(columnName: 'isAvailable', value: e.isAvailable)
]))
.toList();
}
List<DataGridRow> _dataGridRow = [];
List<Product> employeeData = [];
@override
List<DataGridRow> get rows => _dataGridRow;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(cells: [
Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text(row.getCells()[0].value.toString()),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text(row.getCells()[1].value),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text(row.getCells()[2].value.toString()),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Checkbox(
value: row.getCells()[3].value,
onChanged: (value) {
final index = _dataGridRow.indexOf(row);
employeeData[index].isAvailable = value!;
row.getCells()[3] =
DataGridCell(value: value, columnName: 'isAvailable');
notifyDataSourceListeners(
rowColumnIndex: RowColumnIndex(index, 3));
},
))
]);
}
}
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: productDataSource,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
width: 80,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text(
'ID',
))),
GridColumn(
columnName: 'product',
width: 120,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text('Product'))),
GridColumn(
columnName: 'price',
width: 75,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text('Price'))),
GridColumn(
columnName: 'isAvailble',
width: 150,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text('Is Available'),
))
],
),
);
}
Output screenshot:
Conclusion
I hope you enjoyed learning about how to show CheckBox column 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 create and manipulate data.
For current customers, you can check out our File Formats from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our all platforms.
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!
