Bloc: Using flutter_bloc with tabview

[Z3rolive]

I know asking questions doesn't belong here but I am searching for weeks and I couldn't find answer anywhere and no one responded on stack overflow.

I have a tabview where I have popular, recent and upcoming categories. They all have same response on the api. I am trying to fetch data from api using flutter_bloc. Previously I was using rxdart subject and I made a subject for each type of data. Now using flutter bloc I want to achieve the same. What I want to do is to switch between the tabs. Previously I used behaviorsubject to hold the data until next event but now I want to transition to bloc pattern. How do I achieve same type of result using flutter_bloc? Or I need to create bloc for each type? And finally how can I fetch data from api such that when tab is switched, state is persisted? My Rxdart implementation:

class DataBloc {
  final DataRepo _repository = DataRepo();
  final BehaviorSubject<Data> _recent = BehaviorSubject<Data>();
  final BehaviorSubject<Data> _popular = BehaviorSubject<Data>();
  final BehaviorSubject<Data> _upcoming = BehaviorSubject<Data>();

getData(String type) async {

    Data response = await _repository.getData(type);
    if (type == "recent") {
      _recent.sink.add(response);
    } else if (type == "upcoming") {
      _upcoming.sink.add(response);
    } else {
      _popular.sink.add(response);
    }
  }

  dispose() {
    _recent?.close();
    _popular?.close();
    _upcoming?.close();
  }

  BehaviorSubject<Data> get recent => _recent;
  BehaviorSubject<Data> get popular => _popular;
  BehaviorSubject<Data> get upcoming => _upcoming;
}

[alfredobs97]

Hi @Z3rolive I think you might read the https://bloclibrary.dev/#/architecture to find how to integrate flutter_bloc in easy mode. However, I´m going to explain how I would do in this case:

• I would create two blocs, one for the state of UI, which tab is selected and I would put a blocbuilder in your home to react the user taps
• The other bloc is DataBloc, that recieve the event of fetch data and return the data for each tabs depends on which tab is selected, in the other bloc state.
• If you have one bloc instead, DataBloc have to contain states that represent which tab and if the data is fetched, for example:

abstract DataBlocState{}

class FetchingRecentTab extends DataBlocState{}

class FetchedRecentTab extends DataBlocState{}

class ErrorFetchingRecentTab extends DataBlocState{}

class FetchingPopularTab extends DataBlocState{}

class FetchedPopularTab extends DataBlocState{}

And have a blocbuilder with each case in each screen.

I hope that you will understand the bloc pattern! greetings!

[Z3rolive]

I have used bloc pattern before and I am somewhat familiar with it. But in this case I need to switch tabs while calling their individual api. So in initstate I pass initial event which translates to loading indicator. It is fine for the first time but when user calls api again, auction initial event is added again which causes the state to be loading state again. That's where I am having problems. I have 3 api which are all paginated. I have to switch between them while maintaining their state.

[alfredobs97]

So, I think you need two blocs, one for the state of the UI (If user is in one tab or press another tab) and other to manage the state of calls to the API (if data have been loaded or is fetching) and the DataBloc need to listen UIBloc to know which data have to fetch and dataBloc always have the information loaded so if the user change the page, the dataBloc have the old data that will be sent to the ui if the user come back to the tab.

[Z3rolive]

Can you provide a simple example maybe? I think I know what you mean but I don't exactly understand what I have to do to implement two blocs.

[alfredobs97]

I can give you a pseudocode to follow the guidelines to implement:

1. Create two bloc, for example, TabBloc and DataBloc
2. TabBloc have events to change tab like GoToRecentTab, and states like InRecentTab, InPopularTab...
3. DataBloc only have events like FetchRecentData or FetchPopularTab and states like FetchedRecentData...
4. DataBloc listen TabBlocs, like this guideline: https://bloclibrary.dev/#/architecture?id=bloc-to-bloc-communication
5. Depends on TabBloc states, the DataBloc do some calls like getData or return cachedData, or save the pagination
6. The tabpages listen only DataBloc states to receive info and homepage listen TabBloc to know which tab is selected.

I hope that this will be useful for your implementation, greetings!

[Z3rolive]

Thanks a lot. I am still somewhat confused but I can't expect to be walked through line by line code. I'll give it a try and I think I can do it now. If I run into unfixable issue, I'll maybe open it back up but for now I am closing and trying on my own :)