Bloc: How to update state after a blocbuilder has ran

[JoseGeorges8]

Hi, this might be a silly question, but I was wondering how can I keep on updating the UI after the BlocBuilder has set my state?

I'm trying to create a list upon a state, the list is an ExpansionPanelList and it displays correctly, but I'm not sure how to handle the expansion for them.

Usually it would be done like:

expansionCallback: (int index, bool isExpanded) { setState(() { items[index].isExpanded = !items[index].isExpanded; }); },

However calling setState is re building I believe and therefore my List of items gets repopulated and they become 'false' again which makes them not re open.

How would I approach a change of state like this?

Thanks!

[felangel]

Great question! I’ll create a small sample in the next few hours 👍

[felangel]

@JoseGeorges8 I just took a look at ExpansionTile in Flutter and it seems like you don't even have to call setState. I ran the example on the flutter samples and it works like a charm. I don't think you'll need to use bloc to achieve this because there's no business logic it's all just presentation/UI.

Let me know if that helps or if I misunderstood your question. Thanks! 😄

[felangel]

Closing for now but feel free to comment and I’ll reopen it. 👍

[JoseGeorges8]

Hey Felix!

There's actually two different widgets, ExpansionTile and ExpansionPanelList with its childs and this is the one that I could not manage to use, but I didn't know about ExpansionTile first and that one works for me so thanks!

[JoseGeorges8]

As I'm here, can I quickly ask you something else? How do I go about doing two requests in one page when is building? So right now I have a simple

body: BlocBuilder( bloc: _packageBloc, builder: (_, PackageState state) { if (state is PackagesLoading) return Center(child: CircularProgressIndicator()); if (state is LabelsLoaded) { final labels = state.labels; print(labels); return Column( children: <Widget>[ _buildLabelListView(labels), // _buildPackagesList(state), ], ); } if (state is PackagesError) { return Text( 'Something went wrong!', style: TextStyle(color: Colors.red), ); } }));

However the // _buildPackagesList(state), is trying to make another dispatch on the same bloc to get a different list of items to display, is this not possible? I get states mixed up and my build function returns null. I tried doing a different blockbuilder inside that function as well.

I think that If I create another bloc it could solve the issue, but the two models are very related so it seemed that having one bloc containing both made sense!

[felangel]

@josegeorges8 hey good question 👍

Is there a reason why you can have the bloc handle retrieving the data for both requests so that once the state is no longer loading you have all the data you need?

[JoseGeorges8]

I'll try do that, thanks I'm just having a hard time getting the pattern!

[felangel]

@JoseGeorges8 I think in order to understand the pattern you need to start thinking about your app from an outsider's (non-technical) perspective.

As a non-technical user I open the app, see a loading indicator, and then see a bunch of data on the home screen (for example). I don't care how many http requests are made or where the data is coming from etc...

Now take that mentality and use it when building your blocs. The bloc should hide all of the details of how the data is retrieved, where it is coming from etc from the UI layer. You'll know you're doing it right if when you're writing the UI there is no logic outside of if my state is A render B etc...

If the UI knows about how many network requests are being made or where the data is coming from then something is wrong. Hope that helps and as with all things it just takes practice 👍

[JoseGeorges8]

Okay then appreciate it!

[hammad-tariq]

Hi @felangel I also came here for a similar query. let say I have ListView as One of the Widget in widget tree. when user tap on any list item I want to highlight selected list item for example changing container (listview item) background color. What I can do in this case ?

Thanks in advance.

[felangel]

@hammad-tariq you can add a selected boolean to the state model for each ListItem and then add an event to the bloc in the onPressed callback.