How to loop through a list to populate a Table in Flutter and Dart?

Issue

I’m writing a mobile app in Flutter+Dart, and am able to render a User’s Account Info, but am stuck on how to loop through a list to populate and render a table with the objects in that list, right under the User Account Info.

Here’s my ‘Container’, I wish to NOT use indexes like videos.removeAt(0) and somehow loop through all the videos to populate the table.

Widget build(BuildContext context) {
    List<Video> videos = Video.getVideosFromJson(jsonDecode(json));
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text('Account Info for ' + customer.firstName + ' ' + customer.lastName),
            Container(
              child: Padding(
                padding: const EdgeInsets.all(14.0),

     //TODO: HERE IS THE TABLE, I WISH TO DUPLICATE THESE ROWS FOR EACH "VIDEO" IN "List<Video> videos"

                child: Table(
                  border: TableBorder.all(width: 1.0, color: Colors.black),
                  children: [
                    TableRow(children: [
                      TableCell(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: <Widget>[
                            new Text('VideoId'),
                            new Text(videos.removeAt(0).id.toString()),
                          ],
                        ),
                      )
                    ]),

                    TableRow(children: [
                      TableCell(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: <Widget>[
                            new Text('Video Price'),
                            new Text(videos.removeAt(0).total.toString()),
                          ],
                        ),
                      )
                    ]),
                  ]
                )
              )
            )
          ]
      )
    );

What is the best way to go about solving this?

Solution

Here is what you can do.

Below dart 2.3 you can use map like:

Table(
  border: TableBorder.all(width: 1.0, color: Colors.black),
  children: videos.map((video){
    return TableRow(children: [
      TableCell(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Text('VideoId'),
            new Text(video.id.toString()),
          ],
        ),
      )
    ]);
  }).toList(),
);

While for dart 2.3 and above:

Table(
  border: TableBorder.all(width: 1.0, color: Colors.black),
  children: [
    for (var video in videos) TableRow(children: [
      TableCell(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Text('VideoId'),
            new Text(video.id.toString()),
          ],
        ),
      )
    ])
  ]
);

Answered By – Adnan karim

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.