Flutter - How should be bloc communications in complex UI?

Question

I want some advice on a topic which I'm curious about. What is the best way and best practice? I tried to draw a UI about this topic. I am using the flutter_bloc package.

Scenario: I have a list as shown in the picture and there are score buttons at the bottom. Buttons are not active without making a selection in the list. Buttons are active when I select an item from the list. When I press the score button, a score is written to the selected element in the list and the score buttons become inactive again.

This UI looks simple, but my problem is with a more complicated UI. So I will definitely use more than one bloc on a screen.

I wonder how do I get this communication between the blocs in the best way? Should I create a parent block on a top layer?

Answer 1

You should have a single bloc which will control the whole screen. On your bloc state you could have a property which holds the selected item(or its index - really up to you here). Your point buttons will be enabled/disabled based on this prop through a BlocBuilder. On a point button tap you just add an event like PointsAssigned(amount: 50) or FiftyPointsAssigned() - again up to you. This event will be mapped to a state where the points are attached to the selected item and will rebuild the UI through a BlocBuilder so your change will be reflected.