0

Olá!

Estou tentando fazer uma lista de checkbox (CheckboxListTile) usando o mobx, porém, sempre que clico na caixinha para marcar/desmarcar tenho que usar o flutter reload ou o setState para atualizar os dados.

O mobx não está atualizando automaticamente utilizando o observer. Não sei porque. Poderiam me ajudar?

Meu model ficou assim:

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;

  }

}

E meu 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
            ),
          ),
        );
      },
    );
  }
5
  • 1
    Já tentou fazer o mesmo procedimento que lhe indiquei na sua outra pergunta? Dentro da função marcarItem(), faça tudo que é preciso com o item e no final faça listaItens[indice] = itemComplemento? Não é a melhor abordagem mas deve funcionar. 19/01/2021 às 22:39
  • Sim, tentei fazer desta forma, o problema é que a lista não atualiza igual aquela outra utilizando o Map. 19/01/2021 às 22:45
  • Naquela deu certo, nessa aparentemente não. Achei estranho! Me indica alguma outra abordagem para tentar? 19/01/2021 às 22:46
  • Te aconselho, dar uma olhada em um repositório meu do GitHub Campo Minado. Lá trabalho com um esquema parecido, você vai conseguir encontrar um exemplo nos arquivos FieldModel e MinesweeperController 19/01/2021 às 22:55
  • Dei uma olhada, porém não consegui chegar a uma solução para esse problema. 19/01/2021 às 23:26

1 Resposta 1

2

Eu dei como exemplo um projeto meu do GitHub e é nele que vou me basear Campo Minado.

Para que seu código fique organizado de uma melhor forma e tenha toda a reatividade que deseja, você precisa que as informações tratadas no CheckBox sejam também uma Store do MobX.

Classe de controle do CheckBox

É necessário que você crie uma classe para controlar os dados do mesmo, faça o seguinte:

class ItemModel = _FieldModel with _$FieldModel;

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

  @observable
  bool checked = false;
  
}

Então modifique teu método existente:

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;

  }

}

Explicação

O Widget Observer vai ficar escutando todo e qualquer Observable que estiver sendo utilizado dentro dele, dessa forma assim que um deles sofrer alterações, as mesmas serão aplicadas no layout.

Por isso que é necessário que a simples classe ItemComplemento vire um Store, o ItemModel. E dessa forma, não é necessário ficar realizando alterações na referência dos objetos da lista.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .