How to perform lazy loading or infinity loading in flutter? - django

Question

I am trying to get lazy loading output with flutter. I could do lazy loading only with a generated array given by flutter as an example. But I couldn't get the same output when integrating with Rest API. How to perform lazy loading with an API in a flutter?

Answer 1

I call an api with pagination ,
here is my code :
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class TestLazyLoading extends StatefulWidget {
#override
_TestLazyLoadingState createState() => new _TestLazyLoadingState();
}
class _TestLazyLoadingState extends State<TestLazyLoading> {
static const String _url = 'https://api.coinranking.com/v1/public/coins';
ScrollController controller;
int _totalCount = 0;
int _limit = 20;
int _offset = 0;
List<String> items = [];
bool _isLoading = true;
#override
void initState() {
super.initState();
controller = new ScrollController()..addListener(_scrollListener);
_getData(limit: _limit, offset: _offset);
}
#override
void dispose() {
controller.removeListener(_scrollListener);
super.dispose();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Scrollbar(
child: ListView.builder(
controller: controller,
itemBuilder: (context, index) {
if (items.length-1 == index && _isLoading ) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return Container(
child: Text(items[index]),
height: 38,
alignment: Alignment.centerLeft,
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
color: Colors.grey[200],
);
}
},
itemCount: items.length,
),
),
),
);
}
void _scrollListener() {
if (controller.position.extentAfter < 50) {
if (!_isLoading && _totalCount > items.length) {
_offset += _limit;
_getData(limit: _limit, offset: _offset);
}
}
}
void _getData({#required int limit, #required int offset}) async {
setState(() {
_isLoading = true;
});
http.Response response =
await http.get('$_url?limit=$limit&offset=$offset');
if (response.statusCode == 200) {
var jsonResponse = jsonDecode(response.body);
_totalCount = jsonResponse['data']['stats']['total'];
List<dynamic> coinList = jsonResponse['data']['coins'];
for (dynamic coin in coinList) {
items.add(coin['symbol']);
}
setState(() {
_isLoading = false;
});
}
}
}
also add dependncy for http in you pubspec.yaml :
dev_dependencies:
flutter_test:
sdk: flutter
http: ^0.12.1
finally call TestLazyLoading widget in the main for testing