Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add dynamically items to the table in flutter?

Tags:

flutter

dart

Do someone know how to add dynamically more rows into the DataTable in Flutter. As you can see my code is very 'hardcoded' [line: 11-31].
There should be a way to get rid of writing more and more DataRows.

Code:

class DataTableWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows: <DataRow>[
        DataRow(
          cells: <DataCell>[
            DataCell(Text('AAAAAA')),
            DataCell(Text('1')),
            DataCell(Text('Yes')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('BBBBBB')),
            DataCell(Text('2')),
            DataCell(Text('No')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('CCCCCC')),
            DataCell(Text('3')),
            DataCell(Text('Yes')),
          ],
        ),
      ],
    );
  }
}
like image 983
Sarah Pöhler Avatar asked Jan 01 '19 17:01

Sarah Pöhler


People also ask

How do you add a TableRow to a table dynamically with Flutter?

Show activity on this post. Create the list beforehand in the build method. final rows = <TableRow>[]; for (var rowData in myRowDataList) { rows. add(TableRow( ... // Generate a TableRow using rowData )); } ... Table( columnWidths: { 0: FlexColumnWidth(1.0), 1: FlexColumnWidth(2.0), }, border: TableBorder.

How do you show data in a table in Flutter?

A DataTable is a material design used to display data on a table or in rows and columns. A Data table is used to show the data which have columns and rows as child, a Column is used to set the name of the column, and a Row is used to set the values of the columns.

How do you use table rows in Flutter?

Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach.


2 Answers

You can use

listOfColumns.map(((element) => DataRow(...))).toList()

This is your code using this method.

class DataTableWidget extends StatelessWidget {
  final List<Map<String, String>> listOfColumns = [
    {"Name": "AAAAAA", "Number": "1", "State": "Yes"},
    {"Name": "BBBBBB", "Number": "2", "State": "no"},
    {"Name": "CCCCCC", "Number": "3", "State": "Yes"}
  ];
//  DataTableWidget(this.listOfColumns);     // Getting the data from outside, on initialization
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows:
          listOfColumns // Loops through dataColumnText, each iteration assigning the value to element
              .map(
                ((element) => DataRow(
                      cells: <DataCell>[
                        DataCell(Text(element["Name"])), //Extracting from Map element the value
                        DataCell(Text(element["Number"])),
                        DataCell(Text(element["State"])),
                      ],
                    )),
              )
              .toList(),
    );
  }
}
like image 92
Guy Luz Avatar answered Oct 04 '22 12:10

Guy Luz


You could do something like this:**

class DataTableWidget extends StatelessWidget {

      List results=[] ;
       intState((){
         super.iniState();
            this.getSale();
 })
Future<String> getData () async {

var response = await http.get(
  "$saleUrl/?format=json",

);
setState(() {
  var dataConvertedToJson = 
json.decode(utf8.decode(response.bodyBytes));
  results = dataConvertedToJson['results'];
});
 print('${results.length}');
  return "successful";
 }
  DataRow _getDataRow(result) {
    return DataRow(
      cells: <DataCell>[
        DataCell(Text(data["text1"])),
        DataCell(Text(data["text2"])),
        DataCell(Text(data["text3"])),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows: List.generate(
          results.length, (index) => _getDataRow(results[index])),
    );
  }
}
like image 37
dshukertjr Avatar answered Oct 04 '22 13:10

dshukertjr