Generate gridView from an http request json response - flutter

Question

the aim is to create a gridView of x elements, where x is dynamic because depends from the answer I receive from http request.
I know how to create a base gridView and how to print the result of my http request, but I've not understood how can I do both things: read json response, count how many elements I hava to create, create all elements with their names.
Here is the code:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'utils/Request.dart';
class MyGames extends StatelessWidget {
// ### Sono i parametri che invio al php nella richiesta
static var requestBody = {"action": "getMyGames", "id_utente": "1"};
Future<Response> richiesta = makeRequest(requestBody);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[850],
body:
GridView.count(crossAxisCount: 1, childAspectRatio: (2.5), children: [
FutureBuilder<Response>(
future: richiesta,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: new BoxDecoration(
color: Colors.green[200],
),
child: Center(
child: Text(
snapshot.data.result[0]['name'](),
style: TextStyle(
color: Colors.grey[800],
),
),
),
));
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
),
]),
);
}
}
Thanks!

Answer 1

I've solved this way:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'utils/Request.dart';
class MyGames extends StatelessWidget {
// ### Sono i parametri che invio al php nella richiesta
static var requestBody = {"action": "getMyGames", "id_utente": "1"};
Future<Response> richiesta = makeRequest(requestBody);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[850],
body: FutureBuilder<Response>(
future: richiesta,
builder: (context, snapshot) {
if (snapshot.hasData) {
final List<Widget> listone =
snapshot.data.result.map<Widget>((el) => tile(el)).toList();
return GridView.extent(
maxCrossAxisExtent: 250,
children: listone,
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
),
);
}
Widget tile(el) {
return Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: new BoxDecoration(
color: Colors.green[200],
),
child: Center(
child: Text(
el['nomeGioco'],
style: TextStyle(
color: Colors.grey[800],
),
), /*Center(
child: Text('Item $index',
style: Theme.of(context).textTheme.headline5)),*/
),
));
}
}