title: How to populate Flutter DataTable with JSON API?
body: <p>I've successfully displayed a hardcoded JSON with a DataTable, like this:
  <a href="https://i.stack.imgur.com/a08Wr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a08Wr.jpg" alt="enter image description here"></a></p>
  
  <pre><code>  final List&lt;Map&lt;String, String&gt;&gt; listOfPetrol = [
      {"logo": "assets/images/shell.jpg", "location": "Johnson Road 1235", "distance": "0.2 KM", "price":"\$12.45", "facilities":"ATM, Restaurant"},
      {"logo": "assets/images/sinopec.jpg", "location": "Hennessy Road", "distance": "0.5 KM", "price":"\$10.00", "facilities":"Toilet"},
      {"logo": "assets/images/shell.jpg", "location": "Lockhart Rd", "distance": "0.9 KM", "price":"\$11.20", "facilities":"ATM"}
    ];
  
  
   DataTable(
                      columns: [
                        DataColumn(label: Text('Logo')),
                        DataColumn(label: Text('Location')),
                        DataColumn(label: Text('Distance')),
                        DataColumn(label: Text('Price')),
                        DataColumn(label: Text('Facilities')),
                      ],
                      rows:
                      listOfPetrol
                          .map(
                        ((element) =&gt; DataRow(
                          cells: &lt;DataCell&gt;[
                            DataCell(Image.asset(element["logo"])),
                            DataCell(Text(element["location"])),
                            DataCell(Text(element["distance"])),
                            DataCell(Text(element["price"])),
                            DataCell(Text(element["facilities"])),
                          ],
                        )),
                      )
                          .toList(),
                    ),
  </code></pre>
  
  <p>Now, I want fetch the JSON from HTTP API, instead. I already figured out this part. Well... kinda:</p>
  
  <pre><code>FetchPetrolList() async {
      var data = await http.get("http://157.230.131.4/gda-api-dev/petrol.php");
      var jsonData = json.decode(data.body);
  
      List&lt;PetrolItem&gt; petrolList = [];
  
      for (var u in jsonData) {
        PetrolItem petrol = PetrolItem(u["logo"], u["location"], u["distance"], u["price"], u["facilities"]);
        petrolList.add(petrol);
        print(petrol.logo+" "+petrol.location+" "+petrol.distance+" "+petrol.price+" "+petrol.facilities);
      }
    }
  </code></pre>
  
  <p>Then how I pass the JSON to the DataTable?
  Full code: <a href="https://gist.github.com/anta40/5b172d885795c71417f2ed2dccffe50c" rel="nofollow noreferrer">https://gist.github.com/anta40/5b172d885795c71417f2ed2dccffe50c</a></p>