Flutter BloC not refresh my view (counter app)

Question

I\'m trying BloC library with Counter test app but I have a little problem on my view when I use object to increment/decrement my counter. MyObject.MyProperty increment or d

Answer 1

I see you are using some kind of redux implementation and i'm not quite sure how this handles the rebuild when actions are dispatched.

As my knowledge you are dispatching an action that update some property on the widget but you are never calling setState again, so the widget is not being rebuild.

Try to call the increment or decrement actions inside a setState function.

Something like this:

onPressed: () {
 setState(() => counterBloc.dispatch(CounterEvent.decrement));
},

Answer 2

I have had same problem, and after googling couple of hour, I have found the solution in https://github.com/felangel/bloc/issues/203#issuecomment-480619554

As shown in the below code, The main problem is that when you yield the state, the previous state and the current state are equal, so blocBuilder have hadn't triggered.

case CounterEvent.decrement:        
  currentState.myProperty -= 1;
  yield currentState; 

You should copy the state, then change and yield it.

final TestTest newState = TestTest();
newState.myProperty = currentState.myProperty;

...

case CounterEvent.decrement:        
  newState.myProperty -= 1;
  yield newState; 

Answer 3

Just posting another possible solution for future visitors.

If you do yield for the same state twice. Your UI won't update.

For example if you have already triggered ShowDataToUser(data) from your Bloc and now after another operation you are yielding ShowDataToUser(data) again, your UI won't update.

A quick hack around this would be to just create a DummyState() in your Bloc and yield DummyState() everytime before you yield ShowDataToUser(data)

Another solution apart from the quick hack around is to define a way for dart to compare and equate a class, cos currently by default ShowDataToUser is the same class, but its contents are different, but Dart doesn't know how to evaluate the content and compare them.

Enters Equatable

For this, you need to use the package : https://pub.dev/packages/equatable

Now you have to extend your Bloc states with Equtable like:

class DummyState extends Equatable {}

Now, if your Bloc States are extending Equatable then you must override the function:

@override
  List<Object> get props => [name];

Here name is the property/field name you want to compare when comparing two same classes.

This function tells your Bloc, how to differentiate between two same states (which might have different values in them).