I have the following code that runs fine for creating a DataTable on button press, except that the logic creates another table where I just want to add a DataRow.
List<Widget> _datatableList = [];
...
void _addDataTableWidget() {
setState(() {
_datatableList.add(_buildEmptyDataTable());
});
}
On Tap:
_addDataTableWidget();
DataTable:
_buildEmptyDataTable(){
return
DataTable(
columns: const [
DataColumn(
label: Text(
"Weight",
style: TextStyle(
fontStyle: FontStyle.italic,
color: kBlack,
),
),
numeric: true,
),
DataColumn(
label: Text(
"Reps",
style: TextStyle(
fontStyle: FontStyle.italic,
color: kBlack,
),
),
numeric: true,
),
],
rows: sets
.map(
(sets) => DataRow(cells: [
DataCell(Text(weightController.text)),
DataCell(Text(repsController.text)),
]),
)
.toList(),
),
}
How do I add just the next datarows on button click?
Instead of creating DataTable
on click, you can handle by checking if rows
contains data or not. and add row on click event.
List<DataRow> dataRows = [];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
TextField(
controller: weightController,
),
TextField(
controller: repsController,
),
if (dataRows.isNotEmpty)
DataTable(
columns: const [
DataColumn(
label: Text(
"Weight",
style: TextStyle(
fontStyle: FontStyle.italic,
// color: kBlack,
),
),
numeric: true,
),
DataColumn(
label: Text(
"Reps",
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.black,
),
),
numeric: true,
),
],
rows: dataRows,
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
dataRows.add(DataRow(cells: [
DataCell(Text(weightController.text)),
DataCell(Text(repsController.text)),
]));
});
},
),
);
}
}