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

Issue

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.

Answered By – fartem

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

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