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.

Answer 1

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 2

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 3

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

Answer 5

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.

Answer 6

set showCheckboxColumn: false to hide checkbox