Flutter - Creating tables dynamically

user_8767821 0
Viewed 11989

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.

dart flutter dynamic
4 Answers

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);
  }
user_28001110

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);
user_22453770

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
)
user_73241090

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,
    ),
);
user_33656670
Related