Pagination with flutter gridview fails - flutter

Question

I am trying to integrate pagination with gridview.builder,it's working in listview without any problem but in gridview it doesn't work as expected,The problem i am facing is The API data is returns 20 data per page,
Problem:In API it returns 20 data/page,in this API it returns total of 21 data,in 1 st page contains 20 data 2nd page contains only 1 data the pagination is working i can load data but i cannot scroll back to page 1 data it just stuck with page 2 data
I am following this Tutorial,this is working with listview without no problem but in gridview the above problem occurs
InitState and Variable initialization
var page = 1;
ScrollController _sccontroller = new ScrollController();
#override
void initState() {
super.initState();
Future token = SharedPrefrence().getToken();
token.then((data) async {
userToken = data;
this.getSearchResult(page);
_sccontroller.addListener(() {
if (_sccontroller.position.pixels ==
_sccontroller.position.maxScrollExtent) {
getSearchResult(page);
}
});
});
setState(() {
title = name;
});
}
#override
void dispose() {
_sccontroller.dispose();
super.dispose();
}
Gridview
GridView.builder(
controller: _sccontroller,
itemCount: search_result_list.length + 1,
physics: const AlwaysScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(childAspectRatio: 5.2 / 8.0,
crossAxisCount: 2, crossAxisSpacing: 3.0, mainAxisSpacing: 3.0),
itemBuilder: (BuildContext context, int index) {
if (index == search_result_list.length) {
return Center(child: Padding(padding: const EdgeInsets.all(8.0), child: CircularProgressIndicator(),));
} else {
return Container(
child: Padding(
padding: const EdgeInsets.only(top:10),
child: GestureDetector(
onTap: () {
},
child: Container(
// height: 700,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2),
),
child: Container(
width: 300,
//height: 500,
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.min,
//crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(2),
child: Image.network(
Urls.baseImageUrl +
search_result_list[index]
.thumb_path,
fit: BoxFit.fill,
height: 180,
width: 180,
),
),
Padding(
padding: const EdgeInsets.all(5),
child: Align(
child: Text(
search_result_list[index].name,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
alignment: Alignment.centerLeft,
)),
],
),
],
)),
),
),
),
),
);
}
},
)
API Function
Future<void> getSearchResult(int index) async {
print("size" + index.toString());
if (!isLoading) {
setState(() {
isLoading = true;
});
// ProgressDialog dialog = CustomDialogs().showLoadingProgressDialog(context);
List<PrefrenceModel> tList = List();
var response = await http.get(
"${Urls.baseUrl}${Urls.CategorySearch}?latitude=${Constants
.latitude}&longitude=${Constants
.longitude}&radius=100&locale=en&keyword=${slug}&page=${index
.toString()}&type=item",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer ${userToken}",
"Accept": "application/json"
},
);
Map<String, dynamic> value = json.decode(response.body);
if (response.statusCode == 200) {
// dialog.dismissProgressDialog(context);
try {
print("response search " + response.body.toString());
Map<String, dynamic> value = json.decode(response.body);
var status = value['success'];
var message = value['message'];
last_page = value['last_page'];
print(message);
if (status == true) {
search_result_list.clear();
try {
var data = value['data']['data'];
if (data.length > 0) {
for (int i = 0; i < data.length; i++) {
var obj = data[i];
//var petrol_obj = obj['petrolstation'];
search_result_list.add(PrefrenceModel(
obj['id'].toString(),
obj['description'].toString(),
obj['valid_from'].toString(),
obj['valid_to'].toString(),
obj['thumbs']['md'].toString(),
obj['status'].toString(),
"",
"",
obj['name'].toString(),
"",
obj['flyer_slug'].toString(),
obj['type'].toString(),
obj['isClipped'],
obj['url'].toString(),
obj['price'].toString(),
obj['flyer_page_id'].toString(),
obj['id'].toString(),
obj['shop_name'].toString(),
obj['shop_logo'].toString(),
obj['brand_name'].toString(),
obj['brand_logo'].toString(),
));
}
setState(() {
isLoading = false;
search_result_list.addAll(tList);
page++;
});
} else {
final snackBar = SnackBar(content: Text("No Data Available"));
_scaffoldKey.currentState.showSnackBar(snackBar);
}
} catch (e) {
e.toString();
}
} else {
print("Error...");
final snackBar = SnackBar(content: Text(message));
_scaffoldKey.currentState.showSnackBar(snackBar);
}
} catch (e) {
print(e.toString());
}
} else {
var message = value['message'];
// dialog.dismissProgressDialog(context);
final snackBar = SnackBar(content: Text(message));
_scaffoldKey.currentState.showSnackBar(snackBar);
}
}
else
{
setState(() { isLoading = false; });
}
}

Answer 1

Pagination will gives you the data related to the page, for example page one will returns data from 1 to 20, page two from 21 to 40. so you have to add data of page 2 to existed data from page 1. but in your case you are calling search_result_list.clear(); this will erase the old data and put only the new data into the list.