In Flutter how to create auto infinite scroll pagination by page id? - flutter

Question

I am trying to create pagination with auto-scroll but with this model (in the bottom), I am unable to do? I am a beginner here in the flutter I tried hard from my end but unfortunately was unable to find out. So can someone plz help me to create infinite auto-scroll pagination in this flutter screen?
Here are my test screen codes:
class Test extends StatefulWidget {
Test({Key key}) : super(key: key);
#override
createState() => _Test();
}
class _Test extends State<Test3> {
Future<getTotalLeadsListss> getLeads;
String _value='total';
#override
void initState() {
super.initState();
loading=false;
getLeads=_getDatacall();
}
int page =1;
ScrollController _scrollController = new ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<getTotalLeadsListss>(
future: _getDatacall(),
builder: (context, snapshot) {
if (snapshot.hasData) {
var dataB =snapshot.data;
return dataB.leadFollowupss.length<=0?
Center(child: Column(
children: [
Image(image:AssetImage(Assets.noDataImg),)
],
)):
ListView.builder(
controller: _scrollController,
itemCount:dataB.leadFollowupss.length,
itemBuilder: (BuildContext context, int index){
return Container(
margin: EdgeInsets.only(left: 8.0,right: 8.0,top: 3.0,bottom: 3.0),
child: GestureDetector(
onTap:(){},
child: Card(
color: Colors.grey,
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
child: ListTile(
contentPadding: EdgeInsets.only(left:8.0,right:8.0),
title: new Text(dataB.leadFollowupss[index].name,maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(
fontSize: 18.0,fontWeight: FontWeight.w600),
),
subtitle: Text(
dataB.leadFollowupss[index].nextMeeting.toString(),
style: TextStyle(),
),
)
)
)
);
}
);
}
else if (snapshot.hasError) {
return Text("${snapshot.error}");
} else if (snapshot.connectionState==ConnectionState.waiting){
return Container(child: Center(child: Image(image:AssetImage(Assets.loaderImg),)));
}
return Container(child: Center(child: Image(image:AssetImage(Assets.loaderImg),)));
},
)
),
);
}
Future<getTotalLeadsListss> _getDatacall()async{
TotalLeadsListss wrapper = new TotalLeadsListss();
return wrapper.getAllLeadsListss(_value,page);
}
}
/// get all leads list
class TotalLeadsListss {
String _value;
Future<getTotalLeadsListss> getAllLeadsListss(_value,page) async {
final response = await http.post(Uri.parse('${mainUrl}lead-list'),
headers:{
'Accept': 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $accessToken',
},
body: {
'type':'$_value',
'page':'$page',
}
);
if (response.statusCode == 200) {
String data = response.body;
return getTotalLeadsListss.fromJson( json.decode(response.body) );
} else {
print('failed to get data');
throw Exception('No records found');
}
}
}
class getTotalLeadsListss {
bool status;
String msg;
List<LeadFollowupss> leadFollowupss;
getTotalLeadsListss({this.status, this.msg, this.leadFollowupss});
getTotalLeadsListss.fromJson(Map<String, dynamic> json) {
status = json['status'];
msg = json['message'];
if (json['data'] != null) {
leadFollowupss = new List<LeadFollowupss>();
json['data'].forEach((v) {
leadFollowupss.add(new LeadFollowupss.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['status'] = this.status;
data['message'] = this.msg;
if (this.leadFollowupss != null) {
data['data'] = this.leadFollowupss.map((v) => v.toJson()).toList();
}
return data;
}
}
class LeadFollowupss {
String id,name,nextMeeting;
LeadFollowupss(
{this.id,this.name,this.nextMeeting});
LeadFollowupss.fromJson(Map<String, dynamic> json) {
id = json['id'];
name = json['business_name'];
nextMeeting=json['next_meeting'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['business_name'] = this.name;
data['next_meeting'] = this.nextMeeting;
return data;
}
}

Answer 1

You need to listen ScrollController
class MyHome extends StatefulWidget {
#override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
late ScrollController controller;
List<String> items = List.generate(20, (index) => 'item $index');
#override
void initState() {
super.initState();
controller = ScrollController()..addListener(_scrollListener);
}
#override
void dispose() {
controller.removeListener(_scrollListener);
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
child: ListView.builder(
controller: controller,
itemBuilder: (context, index) {
return Text(items[index]);
},
itemCount: items.length,
),
);
}
void _scrollListener() {
print(controller.position.extentAfter);
if (controller.position.extentAfter < 500) {
setState(() {
items.addAll(List.generate(20, (index) => 'item $index'));
});
}
}
}
if you got data from server request data in setState with range you need each when user scrolled down