Flutter - Transform flutter bloc event to add debounce
Solution 1
I found the solution.
@override
Stream<Transition< GithubSearchEvent, GithubSearchState >> transformEvents(
Stream< GithubSearchEvent > events, transitionFn) {
return events
.debounceTime(const Duration(milliseconds: 300))
.switchMap((transitionFn));
}
Solution 2
Since bloc
8.0.0 the syntax changed and you need to pass it as a transformer to the on
function. Apart from the debouncing you should think about concurrency. To combine sequential processing with a debounce, you can provide the following function:
import 'package:rxdart/rxdart.dart';
//...
on<GithubSearchEvent>(
(event, emit) {},
transformer: (events, mapper) {
return events.debounceTime(const Duration(milliseconds: 300)).asyncExpand(mapper);
},
);
You can create a reusable transformer as a top-level function like this:
EventTransformer<Event> debounceSequential<Event>(Duration duration) {
return (events, mapper) => events.debounceTime(duration).asyncExpand(mapper);
}
and use it like this:
on<GithubSearchEvent>(
(event, emit) {},
transformer: debounceSequential(const Duration(milliseconds: 300)),
);
Solution 3
I cannt add comment to @user2220771 cause my reputation is too low.
This will not work:
EventTransformer<Event> debounceTransformer<Event>(Duration duration) {
return (events, mapper) => events.debounceTime(duration);
}
you have to switch map as:
EventTransformer<Event> debounceTransformer<Event>(Duration duration) {
return (events, mapper) {
return events.debounceTime(duration).switchMap(mapper);
};
}
Suhas Shelar
Updated on December 22, 2022Comments
-
Suhas Shelar over 1 year
I am trying to make an Infinite list using flutter bloc.
I have taken reference from here: https://github.com/felangel/bloc/blob/926029cae2d7614d38b5a9a8952e36bb59054b02/examples/github_search/common_github_search/lib/src/github_search_bloc/github_search_bloc.dart#L15
According to this post, to add a delay between two events so that api doesn't get spammed, you need to override
transformEvents
and add debounce to events like this:@override Stream<GithubSearchState> transformEvents( Stream<GithubSearchEvent> events, Stream<GithubSearchState> Function(GithubSearchEvent event) next, ) { return (events as Observable<GithubSearchEvent>) .debounceTime( Duration(milliseconds: 300), ) .switchMap(next); }
Problem I am facing is that the Observable has been deprecated by RxDart and I am not sure how to accomplish the above requirement.
-
Sebastian Roth about 3 yearsThis may skip over events if they are sent too frequent?
-
Hamed over 2 years
EventTransformer
is deprecated, how can we implement this withonEvent
? -
user2220771 over 2 years@Hamed you can pass the
transformer
to theon
function. There are a few predefined in thebloc_concurrency
package but to debounce you have to pass the function yourself. -
minato about 2 years
-
minato about 2 years