Articles in this section
Category / Section

How to show CheckBox column in Flutter DataTable (SfDataGrid)?

2 mins read

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'),
              ))
        ],
      ),
    );
  }

View the GitHub sample here.

 

Output screenshot:

Check box column in flutter data grid

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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied