Displaying JSon Data to DataTable Flutter

Issue

I am trying to display JSON data to a DataTable in Flutter. The data is coming from an API, getting data is no problem. But I am running to a problem displaying the list of some data in DataTable, I think is because of the JSON structure.

Here is the JSON sample

"response": [
        {
            "league": {
                "id": 1,
                "name": "World Cup",
                "country": "World",
                "logo": "https://media.api-sports.io/football/leagues/1.png",
                "flag": null,
                "season": 2018,
                "standings": [
                    [
                        {
                            "rank": 1,
                            "team": {
                                "id": 7,
                                "name": "Uruguay",
                                "logo": "https://media.api-sports.io/football/teams/7.png"
                            },
                            "points": 9,
                            "goalsDiff": 5,
                            "group": "FIFA World Cup: Group A",
                            "form": "WWW",
                            "status": "same",
                            "description": "8th Finals",
                            "all": {
                                "played": 3,
                                "win": 3,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 5,
                                    "against": 0
                                }
                            },
                            "home": {
                                "played": 2,
                                "win": 2,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 4,
                                    "against": 0
                                }
                            },
                            "away": {
                                "played": 1,
                                "win": 1,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 1,
                                    "against": 0
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 2,
                            "team": {
                                "id": 4,
                                "name": "Russia",
                                "logo": "https://media.api-sports.io/football/teams/4.png"
                            },
                            "points": 6,
                            "goalsDiff": 4,
                            "group": "FIFA World Cup: Group A",
                            "form": "LWW",
                            "status": "same",
                            "description": "8th Finals",
                            "all": {
                                "played": 3,
                                "win": 2,
                                "draw": 0,
                                "lose": 1,
                                "goals": {
                                    "for": 8,
                                    "against": 4
                                }
                            },
                            "home": {
                                "played": 2,
                                "win": 2,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 8,
                                    "against": 1
                                }
                            },
                            "away": {
                                "played": 1,
                                "win": 0,
                                "draw": 0,
                                "lose": 1,
                                "goals": {
                                    "for": 0,
                                    "against": 3
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 3,
                            "team": {
                                "id": 23,
                                "name": "Saudi Arabia",
                                "logo": "https://media.api-sports.io/football/teams/23.png"
                            },
                            "points": 3,
                            "goalsDiff": -5,
                            "group": "FIFA World Cup: Group A",
                            "form": "WLL",
                            "status": "same",
                            "description": null,
                            "all": {
                                "played": 3,
                                "win": 1,
                                "draw": 0,
                                "lose": 2,
                                "goals": {
                                    "for": 2,
                                    "against": 7
                                }
                            },
                            "home": {
                                "played": 1,
                                "win": 1,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 2,
                                    "against": 1
                                }
                            },
                            "away": {
                                "played": 2,
                                "win": 0,
                                "draw": 0,
                                "lose": 2,
                                "goals": {
                                    "for": 0,
                                    "against": 6
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 4,
                            "team": {
                                "id": 32,
                                "name": "Egypt",
                                "logo": "https://media.api-sports.io/football/teams/32.png"
                            },
                            "points": 0,
                            "goalsDiff": -4,
                            "group": "FIFA World Cup: Group A",
                            "form": "LLL",
                            "status": "same",
                            "description": null,
                            "all": {
                                "played": 3,
                                "win": 0,
                                "draw": 0,
                                "lose": 3,
                                "goals": {
                                    "for": 2,
                                    "against": 6
                                }
                            },
                            "home": {
                                "played": 1,
                                "win": 0,
                                "draw": 0,
                                "lose": 1,
                                "goals": {
                                    "for": 0,
                                    "against": 1
                                }
                            },
                            "away": {
                                "played": 2,
                                "win": 0,
                                "draw": 0,
                                "lose": 2,
                                "goals": {
                                    "for": 2,
                                    "against": 5
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        }
                    ],
                    [
                        {
                            "rank": 1,
                            "team": {
                                "id": 9,
                                "name": "Spain",
                                "logo": "https://media.api-sports.io/football/teams/9.png"
                            },
                            "points": 5,
                            "goalsDiff": 1,
                            "group": "FIFA World Cup: Group B",
                            "form": "WWW",
                            "status": "same",
                            "description": "8th Finals",
                            "all": {
                                "played": 3,
                                "win": 1,
                                "draw": 2,
                                "lose": 0,
                                "goals": {
                                    "for": 6,
                                    "against": 5
                                }
                            },
                            "home": {
                                "played": 1,
                                "win": 0,
                                "draw": 1,
                                "lose": 0,
                                "goals": {
                                    "for": 2,
                                    "against": 2
                                }
                            },
                            "away": {
                                "played": 2,
                                "win": 1,
                                "draw": 1,
                                "lose": 0,
                                "goals": {
                                    "for": 4,
                                    "against": 3
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 2,
                            "team": {
                                "id": 27,
                                "name": "Portugal",
                                "logo": "https://media.api-sports.io/football/teams/27.png"
                            },
                            "points": 5,
                            "goalsDiff": 1,
                            "group": "FIFA World Cup: Group B",
                            "form": "LWW",
                            "status": "same",
                            "description": "8th Finals",
                            "all": {
                                "played": 3,
                                "win": 1,
                                "draw": 2,
                                "lose": 0,
                                "goals": {
                                    "for": 5,
                                    "against": 4
                                }
                            },
                            "home": {
                                "played": 2,
                                "win": 1,
                                "draw": 1,
                                "lose": 0,
                                "goals": {
                                    "for": 4,
                                    "against": 3
                                }
                            },
                            "away": {
                                "played": 1,
                                "win": 0,
                                "draw": 1,
                                "lose": 0,
                                "goals": {
                                    "for": 1,
                                    "against": 1
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 3,
                            "team": {
                                "id": 22,
                                "name": "Iran",
                                "logo": "https://media.api-sports.io/football/teams/22.png"
                            },
                            "points": 4,
                            "goalsDiff": 0,
                            "group": "FIFA World Cup: Group B",
                            "form": "WLL",
                            "status": "same",
                            "description": null,
                            "all": {
                                "played": 3,
                                "win": 1,
                                "draw": 1,
                                "lose": 1,
                                "goals": {
                                    "for": 2,
                                    "against": 2
                                }
                            },
                            "home": {
                                "played": 2,
                                "win": 0,
                                "draw": 1,
                                "lose": 1,
                                "goals": {
                                    "for": 1,
                                    "against": 2
                                }
                            },
                            "away": {
                                "played": 1,
                                "win": 1,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 1,
                                    "against": 0
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 4,
                            "team": {
                                "id": 31,
                                "name": "Morocco",
                                "logo": "https://media.api-sports.io/football/teams/31.png"
                            },
                            "points": 1,
                            "goalsDiff": -2,
                            "group": "FIFA World Cup: Group B",
                            "form": "LLL",
                            "status": "same",
                            "description": null,
                            "all": {
                                "played": 3,
                                "win": 0,
                                "draw": 1,
                                "lose": 2,
                                "goals": {
                                    "for": 2,
                                    "against": 4
                                }
                            },
                            "home": {
                                "played": 1,
                                "win": 0,
                                "draw": 0,
                                "lose": 1,
                                "goals": {
                                    "for": 0,
                                    "against": 1
                                }
                            },
                            "away": {
                                "played": 2,
                                "win": 0,
                                "draw": 1,
                                "lose": 1,
                                "goals": {
                                    "for": 2,
                                    "against": 3
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        }
                    ],
                    [
                        {
                            "rank": 1,
                            "team": {
                                "id": 2,
                                "name": "France",
                                "logo": "https://media.api-sports.io/football/teams/2.png"
                            },
                            "points": 7,
                            "goalsDiff": 2,
                            "group": "FIFA World Cup: Group C",
                            "form": "WWW",
                            "status": "same",
                            "description": "8th Finals",
                            "all": {
                                "played": 3,
                                "win": 2,
                                "draw": 1,
                                "lose": 0,
                                "goals": {
                                    "for": 3,
                                    "against": 1
                                }
                            },
                            "home": {
                                "played": 2,
                                "win": 2,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 3,
                                    "against": 1
                                }
                            },
                            "away": {
                                "played": 1,
                                "win": 0,
                                "draw": 1,
                                "lose": 0,
                                "goals": {
                                    "for": 0,
                                    "against": 0
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 2,
                            "team": {
                                "id": 21,
                                "name": "Denmark",
                                "logo": "https://media.api-sports.io/football/teams/21.png"
                            },
                            "points": 5,
                            "goalsDiff": 1,
                            "group": "FIFA World Cup: Group C",
                            "form": "LWW",
                            "status": "same",
                            "description": "8th Finals",
                            "all": {
                                "played": 3,
                                "win": 1,
                                "draw": 2,
                                "lose": 0,
                                "goals": {
                                    "for": 2,
                                    "against": 1
                                }
                            },
                            "home": {
                                "played": 2,
                                "win": 0,
                                "draw": 2,
                                "lose": 0,
                                "goals": {
                                    "for": 1,
                                    "against": 1
                                }
                            },
                            "away": {
                                "played": 1,
                                "win": 1,
                                "draw": 0,
                                "lose": 0,
                                "goals": {
                                    "for": 1,
                                    "against": 0
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 3,
                            "team": {
                                "id": 30,
                                "name": "Peru",
                                "logo": "https://media.api-sports.io/football/teams/30.png"
                            },
                            "points": 3,
                            "goalsDiff": 0,
                            "group": "FIFA World Cup: Group C",
                            "form": "WLL",
                            "status": "same",
                            "description": null,
                            "all": {
                                "played": 3,
                                "win": 1,
                                "draw": 0,
                                "lose": 2,
                                "goals": {
                                    "for": 2,
                                    "against": 2
                                }
                            },
                            "home": {
                                "played": 1,
                                "win": 0,
                                "draw": 0,
                                "lose": 1,
                                "goals": {
                                    "for": 0,
                                    "against": 1
                                }
                            },
                            "away": {
                                "played": 2,
                                "win": 1,
                                "draw": 0,
                                "lose": 1,
                                "goals": {
                                    "for": 2,
                                    "against": 1
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        },
                        {
                            "rank": 4,
                            "team": {
                                "id": 20,
                                "name": "Australia",
                                "logo": "https://media.api-sports.io/football/teams/20.png"
                            },
                            "points": 1,
                            "goalsDiff": -3,
                            "group": "FIFA World Cup: Group C",
                            "form": "LLL",
                            "status": "same",
                            "description": null,
                            "all": {
                                "played": 3,
                                "win": 0,
                                "draw": 1,
                                "lose": 2,
                                "goals": {
                                    "for": 2,
                                    "against": 5
                                }
                            },
                            "home": {
                                "played": 1,
                                "win": 0,
                                "draw": 0,
                                "lose": 1,
                                "goals": {
                                    "for": 0,
                                    "against": 2
                                }
                            },
                            "away": {
                                "played": 2,
                                "win": 0,
                                "draw": 1,
                                "lose": 1,
                                "goals": {
                                    "for": 2,
                                    "against": 3
                                }
                            },
                            "update": "2020-06-18T00:00:00+00:00"
                        }
                    ],

The code display the data in the datatable

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: FutureBuilder<Standings>(
          future: _apiService.getStandings(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              Standings datas = snapshot.data;
              return ListView.builder(
                  itemCount: datas.response[0].league.standings.length,
                  itemBuilder: (BuildContext ctx, int i) {
                    return Card(
                      child: DataTable(
                        // ignore: prefer_const_constructors
                        // ignore: prefer_const_literals_to_create_immutables
                        // ignore: prefer_const_constructors
                        columns: <DataColumn>[
                          DataColumn(
                            label: Text('Team'),
                          ),
                        ],
                        rows: <DataRow>[
                          DataRow(
                            cells: <DataCell>[
                              DataCell(
                                Text(datas.response[0].league.standings[0][0]
                                    .team.name),
                              ),
                            ],
                          ),
                        ],
                      ),
                    );
                  });
            }
            return Center(
              child: CircularProgressIndicator(),
            );
          }),
    ));

The result
Result when ran code

I know the reason one team is showing is because of this code

 <DataCell>[
                              DataCell(
                                Text(datas.response[0].league.standings[i][0]
                                    .team.name),
                              ),

But how can I display the rest of teams automatically? Thanks in advance.

Solution

For anyone that was facing the same problem, based on this question(Link) that was answered, this help me modified the code.

return ListView.builder(
                  itemCount: datas.response[0].league.standings.length,
                  itemBuilder: (BuildContext ctx, int i) {
                    return Column(
                      children: <Widget>[
                        ListTile(
                          title: Text(
                              datas.response[0].league.standings[i][0].group),
                        ),
                        Row(
                          children: [
                            Text('Position'),
                            Text(''),
                            Text('Team'),
                          ],
                        ),
                        Card(
                          child: Row(
                            children: <Widget>[
                              Column(
                                children: <Widget>[
                                  Text(datas
                                      .response[0].league.standings[i][0].rank
                                      .toString()),
                                  Text(datas
                                      .response[0].league.standings[i][1].rank
                                      .toString()),
                                  Text(datas
                                      .response[0].league.standings[i][2].rank
                                      .toString()),
                                  Text(datas
                                      .response[0].league.standings[i][3].rank
                                      .toString()),
                                ],
                              ),
                              Column(children: <Widget>[
                                Image(
                                  image: NetworkImage(datas.response[0].league
                                      .standings[i][0].team.logo),
                                  height: 30,
                                  width: 20,
                                ),
                                Image(
                                  image: NetworkImage(datas.response[0].league
                                      .standings[i][1].team.logo),
                                  height: 30,
                                  width: 20,
                                ),
                                Image(
                                  image: NetworkImage(datas.response[0].league
                                      .standings[i][2].team.logo),
                                  height: 30,
                                  width: 20,
                                ),
                                Image(
                                  image: NetworkImage(datas.response[0].league
                                      .standings[i][3].team.logo),
                                  height: 30,
                                  width: 20,
                                ),
                              ]),
                              Column(
                                children: [
                                  Text(datas.response[0].league.standings[i][0]
                                      .team.name),
                                  Text(datas.response[0].league.standings[i][1]
                                      .team.name),
                                  Text(datas.response[0].league.standings[i][2]
                                      .team.name),
                                  Text(datas.response[0].league.standings[i][3]
                                      .team.name)
                                ],
                              )
                            ],
                          ),
                        )
                      ],
                    );
                  });

Answered By – neuryzonso

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *