Flutter - Creating tables dynamically - dynamic

Question

I'm trying to dynamically create tables using Dart and Flutter. Something like this The number of table rows will change depending on the the JSON file passed in.
I've read through and done all of the Flutter tutorials I can get my hands on and read through the Documentation on the Table and ListBuilder classes, but none of them quite accomplish what I'm trying to do, because the examples either only dynamically create single ListItems or all the data and/or Widgets are hard-coded.
I've also tried doing this by doing:
Table dynamicTable = new Table(); then dynamically adding children Widgets with
dynamicTable.add(TableRow(
children: [
Text("test1"),
Text("test2"),
Text("test3"),
]
));
But I get an error saying "Cannot add to an unmodifiable list".
Any tips on how to accomplish this would be greatly appreciated.

Answer 1

This function creates a table dynamically:
Widget createTable() {
List<TableRow> rows = [];
for (int i = 0; i < 100; ++i) {
rows.add(TableRow(children: [
Text("number " + i.toString()),
Text("squared " + (i * i).toString()),
]));
}
return Table(children: rows);
}

Answer 2

First fetch List of Records
List<PriceDetailsView> priceDetailsList = MockDataSource.getPriceDetailsDataList();
Now create an empty list of table rows :
List<TableRow> priceTableRows = [];
Add details from the fetched list to this row list:
for(PriceDetailsView priceDetalis in priceDetailsList){
priceTableRows.add(TableRow(children: [Text(priceDetalis.priceType), Text(priceDetalis.priceValue)]));
}
Now create your table with this list of row :
Table priceTable = Table(children: priceTableRows);

Answer 3

Suppose you have this model class:
class Person {
final int id;
final String name;
final String email;
final String phone;
const Person({
this.id = 0,
this.name = '',
this.email = '',
this.phone = '',
});
...
}
and you have populated a List of Person with data from an API call:
List<Person> _personList = ...
To generate the TableRow, you can do it using List.generate Dart function:
return Table(
border: TableBorder.all(color: Colors.black),
children: List<TableRow>.generate(
_personList.length,
(index) {
final person = _personList[index];
return TableRow(
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Text(person.id.toString(), textAlign: TextAlign.center),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Text(person.name, textAlign: TextAlign.center),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Text(person.email, textAlign: TextAlign.center),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Text(person.phone, textAlign: TextAlign.center),
),
],
);
},
growable: false,
),
);

Answer 4

It's pretty easy, actually! All you have to do is, make a list of TableRows, and put that in the children parameter of your table. For example
List<TableRow> tableRows = [];
// dynamically make TableRows and add them to the list
And then you can just do this:
Table(
children: tableRows,
// other stuff
)