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 ha

Answer 1

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

Answer 2

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.

Answer 3

you can use onSelectChanged property from DataRow.

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

Answer 4

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