Flutter - fill table with dyanmic data

Question

In my class, I have a variable named report, that looks like this:

{
    "id": 1,
    "type": "my type",
    "name": "Report 1",
    "client_name": "John",
    "website": "john.com",
    "creation_time": "2019-03-12T22:00:00.000Z",
    "items": [{
            "id": 1,
            "report_id": 1,
            "place": "Kitchen",
            "type": "sometype",
            "producer": "somepro",
            "serial_number": "123123",
            "next_check_date": "2019-03-19",
            "test_result": "Verified",
            "comments": "some comments"
        }]
    }

I want to show the list of items in a table with flutter.

So far, I just created a static table as follows:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(report['name'])),
      body: Container(
        child: Table(children: [
                  TableRow(children: [
                    Text("TITLE 1"),
                    Text("TITLE 2"),
                    Text("TITLE 3"),
                  ]),
                  TableRow(children: [
                    Text("C1"),
                    Text("C2"),
                    Text("C3"),
                  ])
        ])
      )
    );
  }
}

Couldn't find any examples of how to fill the table rows (the titles can stay static) with my JSON items list. Each row should be an item from the items JSON array.

Any idea?

Answer 1

You can map items to TableRows. Don't forget to end with toList().

For example:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(report['name'])),
        body: Container(
            child: Table(
                children: (report['items'] as List)
                    .map((item) => TableRow(children: [
                          Text(item['id'].toString()),
                          Text(item['report_id'].toString()),
                          Text(item['place']),
                          // you can have more properties of course
                        ]))
                    .toList())));
  }

If you want the static titles that you mentioned, you could use insert on the list you create above, and then you have:

  @override
  Widget build(BuildContext context) {
    var list = (report['items'] as List)
        .map((item) => TableRow(children: [
              Text(item['id'].toString()),
              Text(item['report_id'].toString()),
              Text(item['place']),
              //...
            ]))
        .toList();
    list.insert(
        0,
        TableRow(children: [
          Text("TITLE 1"),
          Text("TITLE 2"),
          Text("TITLE 3"),
          //...
        ]));
    return Scaffold(
        appBar: AppBar(title: Text(report['name'])),
        body: Container(child: Table(children: list)));
  }