How to prevent api being called multiple times on scroll controller - flutter

Question

I have a scroll controller. I am making a request when the scroll position passes a defined value. The problem is, it is making thousands of requests when it overpasses the position. To prevent this I tried implementig a loading but it doesn't seem to be working.
Here's my scroll controller
#override
void initState() {
super.initState();
PetsBloc petsBloc = BlocProvider.of<PetsBloc>(context);
_scrollController.addListener(() {
final ScrollPosition position = _scrollController.position;
if (position.pixels >= position.maxScrollExtent - 500 &&
selectedView.isNotEmpty &&
!petsBloc.state.loading) {
//* Make the requeset
petsBloc.add(CollectionRequested(collection, page));
setState(() {
page++;
});
}
});
}
This is my pets_bloc.dart:
class PetsBloc extends Bloc<PetsEvent, PetsState> {
PetsRepository petsRepository = PetsRepository();
AlertsRepository alertsRepository = AlertsRepository();
InfoRepository infoRepository = InfoRepository();
PetsBloc() : super(const PetsState()) {
on<CollectionRequested>((event, emit) async {
if (!state.loading) {
emit(state.copyWith(loading: true));
final List<PetModel> result =
await petsRepository.getCollection(event.collection, event.page * 10);
switch (event.collection) {
case 'lost':
emit(state.copyWith(lostPets: [...state.lostPets, ...result]));
break;
case 'transit':
emit(state.copyWith(foundPets: [...state.foundPets, ...result]));
break;
case 'adoption':
emit(state.copyWith(adoptionPets: [...state.adoptionPets, ...result]));
break;
}
}
});
}
}
This is my pets_state.dart
part of 'pets_bloc.dart';
class PetsState extends Equatable {
final List<PetModel> lostPets;
final List<PetModel> adoptionPets;
final List<PetModel> foundPets;
final List<AlertModel> alertPets;
final List<UserPost> userPosts;
final bool loading;
final bool fetched;
const PetsState({
this.lostPets = const [],
this.adoptionPets = const [],
this.foundPets = const [],
this.alertPets = const [],
this.userPosts = const [],
this.loading = false,
this.fetched = false,
});
PetsState copyWith({
List<PetModel>? lostPets,
List<PetModel>? adoptionPets,
List<PetModel>? foundPets,
List<AlertModel>? alertPets,
List<UserPost>? userPosts,
bool? loading,
bool? fetched,
}) =>
PetsState(
lostPets: lostPets ?? this.lostPets,
adoptionPets: adoptionPets ?? this.adoptionPets,
foundPets: foundPets ?? this.foundPets,
alertPets: alertPets ?? this.alertPets,
userPosts: userPosts ?? this.userPosts,
loading: loading ?? this.loading,
fetched: fetched ?? this.fetched,
);
#override
List<Object> get props => [lostPets, adoptionPets, foundPets, alertPets, userPosts];
}
The request is still being made even though I have an if with petsBloc.state.loading in my initstate and inside the on an if(!state.loading)
I hope you can help me! Thanks in advance!

Answer 1

Here you could find an official example of how to throttle your events so that only a single event will be fired in a short period.
The main idea is to implement a custom event transformer:
EventTransformer<E> throttleDroppable<E>(Duration duration) {
return (events, mapper) {
return droppable<E>().call(events.throttle(duration), mapper);
};
}
Notice, that you need to add a bloc_concurrency package to your project dependencies.
Then, use this event transformer in your bloc:
class PetsBloc extends Bloc<PetsEvent, PetsState> {
PetsRepository petsRepository = PetsRepository();
AlertsRepository alertsRepository = AlertsRepository();
InfoRepository infoRepository = InfoRepository();
PetsBloc() : super(const PetsState()) {
on<CollectionRequested>((event, emit) async {
if (!state.loading) {
emit(state.copyWith(loading: true));
final List<PetModel> result =
await petsRepository.getCollection(event.collection, event.page * 10);
switch (event.collection) {
case 'lost':
emit(state.copyWith(lostPets: [...state.lostPets, ...result]));
break;
case 'transit':
emit(state.copyWith(foundPets: [...state.foundPets, ...result]));
break;
case 'adoption':
emit(state.copyWith(adoptionPets: [...state.adoptionPets, ...result]));
break;
}
}
},
transformer: throttleDroppable(Duration(milliseconds: 100)), // Use the new transformer
);
}
}
At the moment, all of the events within 100 milliseconds will be dismissed and only a single event will be fired. Feel free to adjust this duration value based on your needs.