Flutter using FutureBuilder how we can create list with lazy loading or more loading elements call on web service

Question

I am trying to do lay loading listview with live web service response in flutter can anyone help me? how to achieve this?

Answer 1

You should parse data in background.

Create a method to fetch data:

Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response =
      await client.get('https://jsonplaceholder.typicode.com/photos');

  // Use the compute function to run parsePhotos in a separate isolate
  return compute(parsePhotos, response.body);
}

Add your fetch method in builder of FutureBuilder.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: FutureBuilder<List<Photo>>(
        future: fetchPhotos(http.Client()),
        builder: (context, snapshot) {
          if (snapshot.hasError) print(snapshot.error);

          return snapshot.hasData
              ? PhotosList(photos: snapshot.data)
              : Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

Look full example: https://flutter.io/cookbook/networking/background-parsing/