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

911

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)),
            ]));
          });
        },
      ),
    );
  }
}
Share:
911
who-aditya-nawandar
Author by

who-aditya-nawandar

Updated on January 02, 2023

Comments

  • who-aditya-nawandar
    who-aditya-nawandar about 1 year

    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?

  • Hamou Ouyaba
    Hamou Ouyaba almost 2 years
    thnx it works for me as well