Bloc: How to use Bloc in List<List<Model>> structure

[huhudev-git]

Hi, Everyone! I have a very tricky situation and I have no ideal whatever I do it in the right way.

I'm trying to use a bloc pattern to create a TabBarView, the length of Tabs would change depend on the data. Each Tab has a category, and the Model is classified by category, in TabBarView use ListView to show the Model. For example, the structure just likes movies, and each movie has only one category, also the amount of categories is unknown.

Here is how it works. Fisrt the app will load (current time) all categories and movies, maybe 0-10 movies per category, and initialize them into each tab, then when user goto each tab and reach the end of the ListView, the app will load more movies just like a infinite list. And click on the ListTile will goto the movie details page, and fetch the details data, but it still need previous data at ListTile(It will not fetched from server). Furthermore the detail page is a PageView, you can slide the page to see other movies which have the same category just like act the Gmail app.

Currently I use a global bloc to manage all of them. first the bloc will load all categories and movies and initialize the TabBarView. when reach the ListView end, bloc will load more movies which have the same category from server. also when click the ListTile. It will fetch the details. and show them in details page.

the fisrt problem is when I have a MoviesLoadedState like below

abstract class MoviesState extends Equatable {...}

class MoviesLoadedState extends MoviesState {
  final List<Category> categorise;

  MoviesLoadedState(this.categorise);
}

// and the Category
class Category extends Equatable {
  final List<Movie> items;
  final int categoryIndex;
  final String category;
  final int page;
  final bool isLastPage;

  Category({
    @required this.items,
    @required this.categoryIndex,
    @required this.category,
    @required this.page,
    @required this.isLastPage,
  });

  @override
  List<Object> get props => [categoryIndex, items, category, page, isLastPage];
}

when use this, if fetch the movie's details data and update movie in items. bloc will determine the new state is same as current state. so the widgets will not br rebuilded.

---

the second problem is if I want to handle exception or something, I need add error field on the Category Model and the Movie Model like below, also like the isLastPage field in Category.

class Movie extends Equatable {
    final String error;
    ...
}

// and use it like
if (movie.error.isEmpty) {
    return MovieDetailsPage(movie);
} else {
    return ErrorPage(movie.error);
}

I dont't think this is the right way to do it. the logic just becomes chaotic.

Should I use per bloc per category, and a bloc to manage the category, a bloc to fetch the details? If I Should, how to share date between them, as said above, it need data at ListTile. Or maybe there are other better ways to do it? Thanks

[felangel]

Hi @huhugiter 👋
Thanks for opening an issue!

when use this, if fetch the movie's details data and update movie in items. bloc will determine the new state is same as current state. so the widgets will not be rebuilded.

Is your Movie class also extending Equatable? Also, if you want to have the bloc emit a new state even if the values are the same as the old state then simply don't extend Equatable in your bloc state class.

the second problem is if I want to handle exception or something, I need add error field on the Category Model and the Movie Model like below, also like the isLastPage field in Category.

It sounds like you have one bloc which has way too many responsibilities and should split it up into multiple smaller blocs. Are you able to share a link to a sample app which illustrates the problems you're having? It would be much easier to help if I can reproduce the issues locally 👍

[felangel]

Closing this for now but feel free to comment if you have additional questions 👍

[huhudev-git]

Sorry for my late reply. I'am afraid I can't share the app because it's under developing, even can't complie. But I found a Post that exactly what I need! So. I took a while to try to achieve it.

Architect your Flutter project using BLOC pattern (Part 2)

I think I solve the problem. Yes, it need to split it up into multiple smaller blocs.
I use CategoryBloc, MovieBloc and MovieDetailBloc to manage them.
It really need to limit the one bloc - one page or one data source. So I can manage state of each page independently.
And I pass the data through the UI layer by event. Every bloc works fine on it's own now.