I have my app connected to graphql using ferry and pagination working. Right now it fetches the first 25 results when the page loads and then when I scroll to the bottom it fetches the next 25. Below is the code that does that.
final getAllPartnerOrganizationsReq = GGetAllPartnerOrganizationsReq(
(b) => b
..requestId = 'MyReviewsReq'
..vars.offset = 0
..vars.limit = 25,
);
void getNextPartnerOrganizations(int offset, int limit) {
final nextGetAllPartnerOrganizationsReq =
getAllPartnerOrganizationsReq.rebuild((b) => b
..requestId = 'MyReviewsReq'
..vars.offset = offset
..vars.limit = limit
..updateResult = (previous, result) {
if (previous == null) {
return result;
}
return previous.rebuild((b) => b
..partnerOrganizations
.addAll(result!.partnerOrganizations!.asList()));
});
client.requestController.add(nextGetAllPartnerOrganizationsReq);
}
@override
void initState() {
super.initState();
client.request(getAllPartnerOrganizationsReq).listen((response) {
for (var i = offset;
i < response.data!.partnerOrganizations!.length;
i++) {
partners.add(response.data!.partnerOrganizations![i]);
}
offset += 25;
setState(() {});
});
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
getNextPartnerOrganizations(offset, 25);
}
});
}
THE QUESTION: I want to have a function that resets this list view completely. I have two needs, one will be a simple refresh icon that resets the list back to the initial 25 and the other will be as part of a search, so if the user searches using a term it removes the list and refetches using those terms. I dont need to know how to use search, I basically need a way to just remove everything from the ListView and get back to a blank slate. Below is the the code relating to where the ListView lives.
@override
Widget build(BuildContext context) {
final model = Provider.of<RetailerDetailsModel>(context, listen: false);
return Scaffold(
appBar: AppBar(
title: const Text('Data Management System'),
),
body: LayoutBuilder(
builder: (context, constraints) {
if (partners.isNotEmpty) {
print('partners');
return ListView.separated(
controller: _scrollController,
itemBuilder: (context, index) => Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: kIsWeb
? FadeInImage.assetNetwork(
width: 100,
height: double.infinity,
imageErrorBuilder: (context, index, error) =>
const Text('Failed to load'),
image: 'https://${partners[index].logo}',
placeholder: 'assets/logo.jpg',
)
: CachedNetworkImage(
imageUrl: 'https://${partners[index].logo}',
placeholder: (context, url) =>
const CircularProgressIndicator(),
fit: BoxFit.contain,
width: 100,
height: double.infinity,
),
title: Text(partners[index].companyName),
subtitle: Text(
partners[index].ogDescription ?? 'No Description Set',
maxLines: 3,
),
trailing:
Text(partners[index].ecommTechnology ?? 'Unknown'),
),
Since the definition of the
partners
variable isn't provided in the code, this answer assumes that it is some kind of a list by looking at how it's used in the code.To remove all entries in the
ListView
, you can just reset this list.