flutter - Generate gridView from an http request json response

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!

question from:https://stackoverflow.com/questions/65893042/generate-gridview-from-an-http-request-json-response

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)),*/
          ),
        ));
  }
}