Problem using Mobx and Observerlist

Question

Hello, good afternoon!

I am trying to make a checkbox list (Checkboxlisttile) using mobx, however, whenever I click on the box to mark or deselect I have to use the flutter Reload or setState to update the data.

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

My model:

part 'ItemComplementoModel.g.dart';
 
class ItemComplementoModel = _ItemComplementoModel with _$ItemComplementoModel;
 
abstract class _ItemComplementoModel with Store{
 
  @observable
  ObservableList<Map<String, dynamic>> listaItens = ObservableList<Map<String, dynamic>>();
 
  @action
  void addItem(Map<String, dynamic> novoItem){
    listaItens.add(novoItem);
  }
 
  @action
  void marcarItem(int indice, bool marcou, ItemComplemento itemComplemento){
    print("marcou");
    //listaItens[indice]["marcou"] = marcou;
 
      print(listaItens);
      print("depois...");
      listaItens[indice]["marcou"] = marcou;
      print(listaItens);
 
  }
 
}    

My Observer:

_parteItemComplemento(int indice, ItemComplemento itemComplemento){

  return Observer(
    builder: (_){
      return CheckboxListTile(
        onChanged: (marcou){
          //setState(() {
          //_listaItensComplementos[indice]["marcou"] = marcou;
          itemComplementoModel.marcarItem(indice, marcou, itemComplemento);
          print("marcou: ${marcou}");
          //_saveData();
          //});
        },
        title: Text(itemComplemento.nome),
        //value: _listaItensComplementos[indice]["marcou"],
        value: itemComplementoModel.listaItens[indice]["marcou"],
        secondary: CircleAvatar(
          child: Icon(
              itemComplementoModel.listaItens[indice]["marcou"]
                  ? Icons.check
                  : Icons.error
          ),
        ),
      );
    },
  );
}

Answer 1

First, when you use the Mobx, inside the Widget Observer no need to use the setState().

Observerlist

This type of list, will be listening to the change in the reference of each object it contains; so every time an object is changed, the Observer will be notified to update on screen.

Resolution

In your case, you’re working with the following

@observable
ObservableList<Map<String, dynamic>> listaItens = ObservableList<Map<String, dynamic>>();

And when you click on some Checkbox you fire the following function:

  @action
  void marcarItem(int indice, bool marcou, ItemComplemento itemComplemento){
      listaItens[indice]["marcou"] = marcou;    
  }

Your problem is that as it is being done, your list is not notifying you of the item’s change as the item’s reference has not changed. What you are doing is simply changing the value of an object from Map.

For it to work properly, the way it’s done there, you need to make a little adjustment:

  @action
  void marcarItem(int indice, bool marcou, ItemComplemento itemComplemento) {
      if (marcou)
        listaItens[indice] = {"marcou": true};
      else
        listaItens[indice] = {"marcou": false};    
  }

In this way, the list will notify the Observer that there has been a change in the object reference and that it is necessary to update the layout.

Answer 2

Perfect answer, Matheus! Thank you very much!

But in this case, I now need to use an object/class instead of the array to pick up other attributes more easily and organized.

So 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
            ),
          ),
        );
      },
    );
  }

However, I continue with the same previous problem, the list is only updated if I use setState, thing that should not happen.