Search code examples
flutterdartdynamicdatatable

Flutter DataTable - How to add DataRow (without repeating HeaderRow) on button click(tap)?


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?


Solution

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