How to listen to state properties changes Flutter bloc pattern

Question

I'm developing a Flutter app and I faced the title's mentioned problem.

The BLoC manage the behaviour of a form with properties of a Person Model.

So my state class looks like this.

class SynchronizedForm extends Equatable {

  final PersonModel savedModel;

  final PersonModel actualModel;

  SynchronizedForm(this.savedModel, this.actualModel);

}

Note: The PersonModel also extends Equatable.

I've added a Simple Delegate to the BLoC, just for me to know what is exactly happening during the application run.

The delegate print on all state transitions.

The properties of the actualModel are updated via Events (BLoC pattern).

class PersonBloc extends Bloc<PersonEvent, PersonState> {

  PersonModel person;

  PersonBloc (PersonModel person);

  @override
  PersonState get initialState => SynchronizedForm (person, person.copyWith());

  @override
  Stream<PersonState> mapEventToState(
    PersonEvent event) async* {

    if (event is ModifyPerson)
      yield* _modifyPerson();

    else if ...
  }

  Stream<PersonState> _modifyPerson(
    ModifyPerson event) async* {

    PersonModel actual = state.actualModel;

    actual.prop = event.value;

    yield SynchronizedForm (
       state.savedModel,
       actual);
   }
}

So the main problem is that I have widgets in my screens that consumes this state changes, but when the actual state is SynchronizedForm and I modify the person I'm again returning a SynchronizedForm. There's no explicit transition here but I need one to.

I tryied without Equatable, with Equatable. Using BlocConsumer, BlocListener (all this from flutter_bloc package). I don't know what more to do.

I hope you understand what I'm trying to do. Thank you all!

score 1 · Answer 1 · answered Nov 12 '20 at 15:34

Have you tried to override props property of your model ?

From equatable code documentation:

  /// Equatables override their own `==` operator and [hashCode] based on their
  /// `props`.

So your model should look like this:

class SynchronizedForm extends Equatable {

  final PersonModel savedModel;

  final PersonModel actualModel;

  // Add this 
  @override
  List<Object> get props => [savedModel, actualModel];

  SynchronizedForm(this.savedModel, this.actualModel);

}

score 0 · Answer 2 · answered Apr 22 '20 at 23:49

From what I understand, you want to basically rebuild the state even though you're passing the same state. For that you'll need to create new copies of the properties of the state so it catches the change.

More on it here: https://bloclibrary.dev/#/faqs

How to listen to state properties changes Flutter bloc pattern

2 Answers2