Observerlist + Mobx problem

Asked

Viewed 87 times

0

Hello!

I’m trying to make a checkbox list (Checkboxlisttile) using mobx, but every time I click on the box to check/uncheck I have to use the flutter reload or the setState to update the data.

mobx is not automatically updating using Observer. I don’t know why. Could you help me?

My model was like this:

abstract class _ItemComplementoModel with Store{

  @observable
  ObservableList<ItemComplemento> listaItens = ObservableList<ItemComplemento>();

  @action
  void addItem(ItemComplemento novoItem){
    listaItens.add(novoItem);
  }

  @action
  void marcarItem(int indice, bool marcou, CarrinhoModel carrinhoModel){

    ItemComplemento itemComplemento = listaItens[indice];
    print(itemComplemento.nome);
    itemComplemento.marcado = marcou;

  }

}

And my Observer:

_parteItemComplemento(int indice, ItemComplemento itemComplemento){
    return Observer(
      builder: (_){
        return CheckboxListTile(
          onChanged: (marcou){
            itemComplementoModel.marcarItem(indice, marcou, carrinhoModel);
            print("marcou ${marcou}");
          },
          title: Text(itemComplemento.nome),
          value: itemComplementoModel.listaItens[indice].marcado,
          secondary: CircleAvatar(
            child: Icon(
                itemComplementoModel.listaItens[indice].marcado
                    ? Icons.check
                    : Icons.error
            ),
          ),
        );
      },
    );
  }
flutter dart
  • 1

    Have you tried the same procedure I indicated in your other question? Within the function marcarItem(), do everything necessary with the item and in the end do listaItens[indice] = itemComplemento? It’s not the best approach but it should work.

  • Yes, I tried to do this way, the problem is that the list does not update the same as the one using Map.

  • That worked, apparently not this. I found it strange! Indicates me some other approach to try?

  • I advise you to take a look at a repository of mine from Github Campo Minado. There I work with a similar scheme, you will be able to find an example in the files Fieldmodel and Minesweepercontroller

  • I took a look, but I couldn’t come up with a solution to this problem.

1 answer

2

I gave as an example a project of mine from Github and it is on it that I will base myself Campo Minado.

In order for your code to be organized in a better way and have all the reactivity you want, you need the information handled on Checkbox are also a Store of Mobx.

Class of control of Checkbox

It is necessary that you create a class to control the data of the same, do the following:

class ItemModel = _FieldModel with _$FieldModel;

abstract class _ItemModel with Store {
  
  _FieldModel({
    this.checked
  });

  @observable
  bool checked = false;
  
}

Then modify your existing method:

abstract class _ItemComplementoModel with Store{

  @observable
  ObservableList<ItemModel> listaItens = ObservableList<ItemModel>();

  @action
  void addItem(ItemModel novoItem){
    listaItens.add(novoItem);
  }

  @action
  void marcarItem(int indice, bool marcou, CarrinhoModel carrinhoModel){

    ItemModel itemModel = listaItens[indice];
    print(itemModel.nome);
    itemModel.marcado = marcou;

  }

}

Explanation

The Widget Observer will be listening to any and all Observable that is being used within it, so as soon as one of them changes, they will be applied in the layout.

That is why it is necessary that the simple class Itemcomplemento turn a Store, the Itemmodel. And this way, it is not necessary to keep making changes in the reference of the list objects.

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.