Flutter DataTable - Tap on row

Question

I am using Flutter DataTables to display list of items in cart. Now I want to edit the quantity of any selected row. Is there a way to get the information of the row user has tapped?

Following is complete code of my DataTable:

class _DataTableSampleState extends State<DataTableSample> {

  void _getSelectedRowInfo() {
    print('Selected Item Row Name Here...')
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTable Sample'),
      ),
      body: Container(
        child: DataTable(
          onSelectAll: (b) {},
          sortAscending: true,
          columns: <DataColumn>[
            DataColumn(
              label: Text('Item'),
            ),
            DataColumn(
              label: Text('Price'),
            ),
          ],
          rows: items
              .map(
                (itemRow) => DataRow(
                      cells: [
                        DataCell(
                          Text(itemRow.itemName),
                          showEditIcon: false,
                          placeholder: false,
                        ),
                        DataCell(
                          Text(itemRow.itemPrice),
                          showEditIcon: true,
                          placeholder: false,
                          onTap: _getSelectedRowInfo,
                        ),
                      ],
                    ),
              )
              .toList(),
        ),
      ),
    );
  }
}

class ItemInfo {
  String itemName;
  String itemPrice;

  ItemInfo({
    this.itemName,
    this.itemPrice,
  });
}

var items = <ItemInfo>[
  ItemInfo(
    itemName: 'Item A',
    itemPrice: '250',
  ),
  ItemInfo(
    itemName: 'Item B',
    itemPrice: '100',
  ),
  ItemInfo(
    itemName: 'Item C',
    itemPrice: '150',
  ),
];

When edit icon is clicked "_getSelectedRowInfo" method is called. I want to get complete detail of selected/tapped row in this function.

score 35 · Accepted Answer · answered Nov 07 '18 at 15:30

35

you can use onSelectChanged property from DataRow.

rows: items
    .map(
        (itemRow) => DataRow(
            onSelectChanged: (bool selected) {
                if (selected) {
                    log.add('row-selected: ${itemRow.index}');
                }
            },
            cells: [
                // ..
            ],
        ),

answered Nov 07 '18 at 15:30

Samuel Silva

667
6
4

7

Thanks it worked. But is there any way to hide the checkbox? – Zain SMJ Nov 08 '18 at 07:38
18

To hide the checkboxes you just have to add the property showCheckboxColumn: false in your Datatable definition. – Sergio Morstabilini May 17 '20 at 16:15

score 19 · Answer 2 · answered Feb 23 '20 at 12:10

Try this :

DataTable(
    showCheckboxColumn: false, // <-- this is important
    columns: [
        DataColumn(label: Text('FirstName')),
         DataColumn(label: Text('LastName')),
    ],
     rows:[
        DataRow(
            cells: [
                DataCell(Text(obj['user1'])),
                DataCell(Text(obj['name-a'])),
            ],
            onSelectChanged: (newValue) {
                print('row 1 pressed');
            },
        ),
        DataRow(
            cells: [
                DataCell(Text(obj['user2'])),
                DataCell(Text(obj['name-b'])),
            ],
            onSelectChanged: (newValue) {
                print('row 2 pressed');
            },
        ),
    ]
),

Hope this helps. Thanks

score 10 · Answer 3 · answered Mar 22 '19 at 10:02

Each DataCell has an onTap callback. You could use this without the unhideable checkbox appearing on your table rows. For example

DataCell(Text(itemrow.itemname),
      onTap: () {
// Your code here
})

This works for me. If you want the onTap to work for the entire DataRow instead of only a DataCell, you could just add the logic to the onTap of each DataCell and get the desired result.

Michel Thomas · Answer 4 · 2020-01-29T16:30:02.657

You can get it done by using a closure , a function object that has access to variables in its lexical scope and basically 'remembers' them.

Change the 'onTap' property of your DataCell to :

onTap: (){_getSelectedRowInfo(itemRow.itemName,itemRow.itemPrice);},

and modify the _getSelectedRowInfo function to accommodate the following changes:

void _getSelectedRowInfo(dynamic name,dynamic price) {
    print('Name:$name  price: $price');
  }

Here's how the entire thing should look like:

class _DataTableSampleState extends State<DataTableSample> {

  void _getSelectedRowInfo(dynamic name,dynamic price) {
    print('Name:$name  price: $price');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTable Sample'),
      ),
      body: Container(
        child: DataTable(
          onSelectAll: (b) {},
          sortAscending: true,
          columns: <DataColumn>[
            DataColumn(
              label: Text('Item'),
            ),
            DataColumn(
              label: Text('Price'),
            ),
          ],
          rows: items
              .map(
                (itemRow) => DataRow(
              cells: [
                DataCell(
                  Text(itemRow.itemName),
                  showEditIcon: false,
                  placeholder: false,
                ),
                DataCell(
                  Text(itemRow.itemPrice),
                  showEditIcon: true,
                  placeholder: false,
                  onTap: (){_getSelectedRowInfo(itemRow.itemName,itemRow.itemPrice);},
                ),
              ],
            ),
          )
              .toList(),
        ),
      ),
    );
  }
}

class ItemInfo {
  String itemName;
  String itemPrice;

  ItemInfo({
    this.itemName,
    this.itemPrice,
  });
}

var items = <ItemInfo>[
  ItemInfo(
    itemName: 'Item A',
    itemPrice: '250',
  ),
  ItemInfo(
    itemName: 'Item B',
    itemPrice: '100',
  ),
  ItemInfo(
    itemName: 'Item C',
    itemPrice: '150',
  ),
];

score 0 · Answer 5 · edited Dec 28 '21 at 20:30

0

Small correction to anyone wondering how to do it on the latest versions of flutter. It takes in a bool? selected rather than a bool selected. This is due to the new null safety values syntax. Ensuring that even if the row is not rendered for whatever reason the data table can still function.

edited Dec 28 '21 at 20:30

Dharman

30,962
25
85
135

answered Dec 28 '21 at 20:25

Rhino773

21
2

score 0 · Answer 6 · answered May 05 '22 at 13:54

0

set showCheckboxColumn: false to hide checkbox

answered May 05 '22 at 13:54

Manesh V Mohanan

1

Yes! When adding **onSelectChanged** in the DataRow, you need to put the **showCheckboxColumn: false** parameter in the **DataTable** to not show the checkbox in the row. ```DataTable(showCheckboxColumn: false``` – linhadiretalipe Jun 01 '23 at 13:47

Flutter DataTable - Tap on row

6 Answers6

Linked