Bloc: [Question] Using ScanStreamTransformer to transform state

[aelshamy]

I would like to implment something similar to this.

```import 'dart:async';

import 'package:rxdart/rxdart.dart';
import '../models/trailer_model.dart';
import '../resources/repository.dart';

class MovieDetailBloc {
final _repository = Repository();
final _movieId = PublishSubject();
final _trailers = BehaviorSubject>();

Function(int) get fetchTrailersById => _movieId.sink.add;
Observable> get movieTrailers => _trailers.stream;

MovieDetailBloc() {
_movieId.stream.transform(_itemTransformer()).pipe(_trailers);
}

dispose() async {
_movieId.close();
await _trailers.drain();
_trailers.close();
}

_itemTransformer() {
return ScanStreamTransformer(
(Future trailer, int id, int index) {
print(index);
trailer = _repository.fetchTrailers(id);
return trailer;
},
);
}
}

I tried using `transformTransitions` like this 

```  @override
  Stream<Transition<StoriesEvent, StoriesState>> transformTransitions(
      Stream<Transition<StoriesEvent, StoriesState>> transitions) {
    final newTransitions = transitions.transform(_itemsTransformers());
    return super.transformTransitions(newTransitions);
  }

but I got mismatch type expectations. can you advise if there is a better way

[narcodico]

Hi @aelshamy ✌

Can you provide more context on what your requirements are and what your end goal is ? I just feel you're approaching this from a vanilla bloc angle.

[aelshamy]

@RollyPeres. I was trying to use the package to add an implementation for a Hacker news API. it loads the initial items as a Listview.builder and defers the loading for items that are not being displayed on the screen yet. each list item will be a future builder that holds the future of each item response. I used this package multiple times but I was interested in testing it out with such a problem.

[felangel]

@aelshamy have you taken a look at the infinite list example?

[aelshamy]

@felangel yes I did and I can somehow use it. But with my case, the service does not support pagination so I am curious how I can lazy load the rest of the element using the listview.builder itself

[narcodico]

@aelshamy Surely you could keep track of how many items you already loaded or the latest item id on the bloc state and request next items based on that. It all depends on what that API looks like.

[aelshamy]

@RollyPeres yeah that could be a way too. the API is hacker news API

[aelshamy]

also, @felangel @RollyPeres what is your opinion for approaching something like the above snippet in general

[narcodico]

@aelshamy in my experience vanilla bloc is too verbose and tedious to work with. Bloc library removes all the unpleasant parts.

A basic approach to keeping the latest id and use it to make the next set of requests would look like:

const latestId = 100, batchSize = 20;

final futures = List.generate(batchSize, (index) => Future.value(latestId + ++index));
final result = await Future.wait(futures);

You would get the latestId from the bloc state and trigger all these requests in parallel as a result of an event you'd add to bloc whenever you'd hit the scroll threshold.
There's definitely a couple of edge cases you'd need to consider here, but this serves as a basic starting point.

Hope that helps you getting started 👍

[aelshamy]

Alright. Thanks @RollyPeres @felangel

[felangel]

@aelshamy closing this for now but feel free to comment with additional questions and I’m happy to continue the conversation 👍