Search code examples
jsonflutterdartflutter-layoutflutter-futurebuilder

How to convert a json data into a List<widgets> in flutter?


a sample of what i have in mind

var url = 'https://www.googleapis.com/books/v1/volumes?q=egg';

Future<BookResponse> getData() async {
  var response = await http.get(url);
  var responseBody = jsonDecode(response.body);
  // print(responseBody);

  return BookResponse.fromJson(responseBody);
}

-----

 FutureBuilder<BookResponse>(
            future: getData(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.hasError) print(snapshot.error);
              if (snapshot.hasData) {
                return ListView.builder(
                    itemCount: snapshot.data.items.length,
                    itemBuilder: (context, index) {
                      return Card(
                          child: ListTile(
                        title:
                            Text(snapshot.data.items[index].volumeInfo.title),
                      ));
                    });
              } else
                return Center(child: CircularProgressIndicator());
            },
          )

im trying to create a method that will convert json map into a List<widgets> so i can use it to display items.

i can't find a way to display items as rows and columns.

is it possible to have multiple widgets using FutureBuilder? (one row of books and another row to show authors for example)

if so i will avoid converting it to List<widgets>


Solution

  • Convert JSON data to objects and:

    Row(
      children: entities.map((entity) => Text(entity.text)).toList();
    ),
    

    It creates a list with widgets.