Flutter DataTable - Tap on row
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',
),
];
you can use onSelectChanged property from DataRow.
rows: items
.map(
(itemRow) => DataRow(
onSelectChanged: (bool selected) {
if (selected) {
log.add('row-selected: ${itemRow.index}');
}
},
cells: [
// ..
],
),
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.
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