CODEWITHSUNDEEP
flutterblocrxdart
Alqueraf
Alqueraf

Reputation: 1388

Flutter BLoC architecture List and Detail screens

Architecture question on Bloc and Flutter.
I have a List Screen with a Listview populated with StreamBuilder.
On Item tap, it opens a Detail Screen where the user can edit the values of that item.
That change has to be propagated to the List Screen Bloc, so that when Detail Screen is dismissed, the change is already reflected on the list.

I was thinking on sharing the same Bloc but thought there might be a better way.

Any ideas? Thanks.

Upvotes: 4

Views: 1405

Answers (6)

Hamid Waezi
Hamid Waezi

Reputation: 896

It's a good idea to share the bloc with details page too. and update the List page bloc by some BlocListners and details page have its bloc to manage details page state and events.

Upvotes: 0

manhtuan21
manhtuan21

Reputation: 3455

You can create a new parent Bloc that wraps both screens; for example, you have UserBloc is a parent bloc:

UserBloc
 -- UserListScreen --> UserListbloc
 -- UserDetailScreen --> UserDetailBloc

Now in UserBloc, you have something like UserRefreshEvent. UserDetailScreen will call to that event then UserListScreen will have a BlocBuilder listen to that change and try to refresh the item equivalent to that refresh User

This design helpful with a UserListScreen has many information but the downside is it will be a lot of code to implement.

If you have many other simple List-Detail screens then a better option is create a super parent Bloc which has all of Refresh event, example:

   RefreshListBloc
     -- UserListScreen --> UserListbloc
     -- UserDetailScreen --> UserDetailBloc
     -- ProductListScreen --> ProductListbloc
     -- ProductDetailScreen --> ProductDetailBloc
     ...

inside RefreshListBloc, you will have UserRefreshEvent, ProductRefreshEvent, ...

Another thing you can do is pass UserListBloc to your UserDetailScreen, and you can add events to that UserListBloc instance, but I don't like that short cut. Passing a block of a screen to another screen will make everything mess up in the future.

Upvotes: 1

Chihiro
Chihiro

Reputation: 417

 var bloc = Provider.of<PageABloc>(context,listen: false);
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return  BlocProvider.value(
               value: bloc,
               child: const PageB(),
       );
    },
  ),
);

Use this method to jump to the page and share the same bloc state.

Upvotes: 0

Kacper Kogut
Kacper Kogut

Reputation: 735

I had a similar problem when I was working on my blog post regarding BLoC. I found out that the best solution is to have one BLoC attached to one screen. These BLoCs can communicate with each other, and get each other states. You can follow my article if you are still interested in this topic.

Upvotes: 3

Varun
Varun

Reputation: 1878

We can use another stream for the detailed screen with respect to the list stream

Upvotes: 0

Vilson Dauinheimer
Vilson Dauinheimer

Reputation: 11

U have many options, but the simplest is share the bloc with a Provider or Singleton

Upvotes: 0

Related Questions