Search a list with Mobx and Get It

Question

I’m trying to make my search system work
The entire app is made in Flutter, Mobx for State and Get It for Injection and the data comes from a json API

I’ve tried it in some ways, but I can’t make it work, I’ve run some groups and they told me my code is correct, so they don’t know why it doesn’t work

This is my code:

My @observable

@observable
  String buscar = "";

My @action

 @action
  void setBuscando(String value) => buscar = value;

And my @computed

  List get resultadoBusca {
    if (buscar.isEmpty) {
      return listaOSs;
    } else {
      return listaOSs.where((element) => element.contains(buscar)).toList();
    }
  }

And I need to display it on my list, and here’s her code

      separatorBuilder: (_, index) => Divider(
        height: altura / 22,
      ),
      itemCount: dadosOS.tamanhoListaOSs, //limitador de objetos criados
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            Navigator.pushNamed(
              context,
              "/detalhada",
              arguments: Detalhada(numero: index),
            );
          },
          child: Container(
            color: Colors.white.withOpacity(0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "O.S." + dadosOS.listaOSs[index]["id"].toString(),
                      style: TextStyle(
                        fontSize: largura / 30,
                      ),
                    ),

My search field is on another page and so on

TextField(
                          autocorrect: false,
                          maxLines: 1,
                          onChanged: osLogin.setBuscando,
                          textAlignVertical: TextAlignVertical.bottom,
                          decoration: InputDecoration(
                            labelText: "Nome, nº ou status",
                            hintText: "",
                            prefixIcon: Icon(
                              Icons.search,
                            ),
                          ),
                        ),

Answer 1

We start by adding after the .contains that ["project"]["name"], this will make you write in the search field be searched in the "name" field inside the "project" object that has in each object of my list, from which I get my API

So that’s it, with the names replaced:

@computed
  List get resultadoBusca {
    if (buscar.isEmpty) {
      return listaOSs;
    } else {
      return listaOSs
          .where((element) => element["project"]["name"]
              .toLowerCase()
              .contains(buscar.toLowerCase()))
          .toList();
    }
  }

The .toLowerCase() so much before the .contains as in and after the buscar it is to leave everything in minuscule letter to not have differences in the searches

After that I added one Observer(builder: (_) {}); in ListView.separated, to make the list fully reactive (without having to change into StatefulWidget)

I also changed the counter to dadosOS.resultadoBusca.length (that dadosOS is from Get It), I also changed the path on each object I display inside Listview, so instead of dadosOS.listaOSs[index]["id"].toString(), used dadosOS.resultadoBusca[index]["id"].toString() in everything I display on the list to only reflect the search result

Next steps

1. Be able to pass the index of the search to my pag of details (I already do with the index of the normal list) [DONE]
2. Can add cascading operations to the return search (to search several places on the list and not only in ["project"]["name"])

Solution of 1. Change everything I once had listaOSs for resultadoBusca, so, because of the conditional in the search, it will display the value of the list anyway and will still match the search result