How to update Dropdownbutton Value State in Flutter with Getx without using Setstate?

Question

I’m trying to make a Dropdownbutton in my project through a Futurebuilder. Before using Getx to update the Value state, I used setState and it worked. After modifying the project for the use of Getx as a state manager I could not update and is giving error. Follow the codes:

                          DropdownButton(
                          icon: Icon(
                            Icons.arrow_drop_down,
                          ),
                          iconSize: 20,
                          hint: Text("Cidade"),
                          style: TextStyle(
                            fontFamily: "WorkSansSemiBold",
                            fontSize: 16.0,
                            color: Colors.black,
                          ),
                          items: _listCidades?.map((item){
                            return new DropdownMenuItem(
                              child: new Text(item.nome),
                              value: item.id,
                            );
                          })?.toList() ?? [],
                          onChanged: (value) {
                            setState(() {
                              mySelection = value;
                            });
                          },
                          value: mySelection,
                        ),

Code with Getx to manage the state:

                            FutureBuilder<List<Cidade>>(
                          future: _loginController.getCity(),
                          builder: (context,  snapshot) {
                            return DropdownButton(
                              hint: Text("Cidade"),
                                items: snapshot.data?.map((cidade) =>
                                    DropdownMenuItem<String>(
                                      child: Text(cidade.nome),
                                      value: cidade.id,
                                    )
                                )?.toList() ?? [],
                              onChanged: (newValue){
                                _loginController.setCidade(RxString(newValue));
                                mySelection = newValue;
                              },
                              value: GetX<LoginController>(
                                builder: (_)=> _.cidade,
                              ),
                            );
                          },
                        )

Controller code:

  var _selectCidade = "0".obs;
  get cidade => this._selectCidade.value;
  set cidade(value) => this._selectCidade.value = value;

Answer 1

You can instantiate the controller within the class and then use it to access the city variable being observed.

To reflect the changes, the.Obs variable must be inside an Obx, as code below, so each time it is changed, the widget will be rebuilt

There are ways you don’t need to instantiate the controller such as using Getview, Getbuilder, etc...

final MeuController controller = MeuController();
    
Obx(() => DropdownButton(
              hint: Text("Cidade"),
              items: snapshot.data
                      ?.map((cidade) => DropdownMenuItem<String>(
                            child: Text(cidade.nome),
                            value: cidade.id,
                          ))
                      ?.toList() ??
                  [],
              onChanged: (newValue) {
                _loginController.setCidade(RxString(newValue));
                mySelection = newValue;
              },
              value: controller .cidade,
            ));