Como utilizar o Observer() do mobX em um TextFormField?

[NicolasHiga]

Bom, tenho essa classe onde defini minhas variáveis @observable e minha função @action. Testei e tudo está funcionando normal, está retornando certinho.

part 'location_controller.g.dart';

class LocationController = _LocationController with _$LocationController;

abstract class _LocationController with Store{
  double lat = 0.0;
  double long = 0.0;
  String erro = '';
  
  @observable
  String cep = '';

  @observable
  String city = '';

  @observable
  String uf = '';
  

  locationController() {
    getPosition();
  }

  @action
  getPosition() async {
    try {
      Position position = await _currentPosition();
      lat = position.latitude;
      long = position.longitude;

      Map<String, String> addressData =
          await LocationUtil.getAddressFromCoordinates(lat, long);
      cep = addressData['cep'];
      uf = addressData['uf'];
      city = addressData['city'];
    
    } catch (e) {
      erro = e.toString();
    }
  }

Em outro arquivo criei uma página de cadastro com TextFormField. Entre eles possuo 3 que estão desabilitados para o usuário e um botão de pegar a localização. Seria essa parte do código (apaguei outros TextFormField que não entram no problema):

class RegisterForm extends StatefulWidget {
  const RegisterForm({super.key});

  @override
  State<RegisterForm> createState() => _RegisterFormState();
}

class _RegisterFormState extends State<RegisterForm> {
  final _formkey = GlobalKey<FormState>();
  final locationEC = LocationController();

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        margin: const EdgeInsets.all(5),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Form(
            key: _formkey,
            child: Column(
              children: [                
                SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: ElevatedButton.icon(
                    onPressed: () {
                      locationEC.getPosition();
                    },
                    icon: const Icon(Icons.location_on),
                    label: Text('Selecionar Localização',
                        style: TextStyles.instance.textRegular
                            .copyWith(fontSize: 16)),
                    style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: ColorsApp.instance.primary,
                        elevation: 2,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15),
                          side: BorderSide(
                              color: ColorsApp.instance.primary, width: 1),
                        )),
                  ),
                ),
                const SizedBox(height: 12),
                Observer(
                  builder: (_) => TextFormField(
                    enabled: false,
                    initialValue: locationEC.cep,
                    style: TextStyles.instance.textInput,
                    decoration: InputDecoration(
                      labelText: 'CEP',
                      fillColor: ColorsApp.instance.background,
                    ),
                  ),
                ),
                const SizedBox(height: 12),
                Row(
                  children: [
                    Flexible(
                      flex: 1,
                      child: Observer(
                        builder: (_) => TextFormField(
                          enabled: false,
                          initialValue: locationEC.uf,
                          style: TextStyles.instance.textInput,
                          decoration: InputDecoration(
                            labelText: 'UF',
                            fillColor: ColorsApp.instance.background,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    Flexible(
                      flex: 4,
                      child: Observer(
                        builder: (_) => TextFormField(
                          enabled: false,
                          initialValue: locationEC.city,
                          style: TextStyles.instance.textInput,
                          decoration: InputDecoration(
                            labelText: 'Cidade',
                            fillColor: ColorsApp.instance.background,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),                
              ],
            ),
          ),
        ),
      );
  }
}

Bom, a ideia é que quando o usuário clicar no botão de Selecionar Localização, suas coordenadas seriam pegas e feita a geocodificação reversa para devolver sua cidade, uf e cep. Até ai está funcionando. Mas após essa lógica, esses valores deveriam aparecer dentro dos TextFormField, sendo exibido para o usuário na tela.

A minha ideia foi chamar o LocationController e setar as variáveis como initialValue nos campos. Pela lógica que aprendi, envolvi esses widgets com um Observer() para que atualizasse os valores quando o usuário passasse suas coordenadas.

Bom, essa era a ideia. O problema é que não está funcionando, os 3 campos do formulário não atualiza. O que estaria errado?

[HenriqueNas]

Salve @NicolasHiga , bom batendo o olho no código, acho que teu problema é setar a propriedade initialValue: locationEC.<prop>, ao invés disso, tente utilizar TextEditingController e passar o texto para a propriedade text, entendeu? Algo como:

class RegisterForm extends StatefulWidget {
  const RegisterForm({super.key});

  @override
  State<RegisterForm> createState() => _RegisterFormState();
}

class _RegisterFormState extends State<RegisterForm> {
  final _formkey = GlobalKey<FormState>();
  final locationEC = LocationController();
  // seu controller aqui
  final cepController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        margin: const EdgeInsets.all(5),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Form(
            key: _formkey,
            child: Column(
              children: [                
                SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: ElevatedButton.icon(
                    onPressed: () {
                      locationEC.getPosition();
                    },
                    icon: const Icon(Icons.location_on),
                    label: Text('Selecionar Localização',
                        style: TextStyles.instance.textRegular
                            .copyWith(fontSize: 16)),
                    style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: ColorsApp.instance.primary,
                        elevation: 2,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15),
                          side: BorderSide(
                              color: ColorsApp.instance.primary, width: 1),
                        )),
                  ),
                ),
                const SizedBox(height: 12),
                Observer(
                  builder: (_) {
                   // define o valor do texto aqui
                   cepController.text = locationEC.cep;

                   return TextFormField(
                     // enabled: false,
                     // para esse campo não ser editável, defina a propriedade _readOnly_ como **true**
                     readOnly: true,
                     controller: cepController,
                     style: TextStyles.instance.textInput,
                     decoration: InputDecoration(
                       labelText: 'CEP',
                       fillColor: ColorsApp.instance.background,
                     ),
                   );
                  },
                ),
                const SizedBox(height: 12),
                Row(
                  children: [
                    Flexible(
                      flex: 1,
                      child: Observer(
                        builder: (_) => TextFormField(
                          enabled: false,
                          initialValue: locationEC.uf,
                          style: TextStyles.instance.textInput,
                          decoration: InputDecoration(
                            labelText: 'UF',
                            fillColor: ColorsApp.instance.background,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    Flexible(
                      flex: 4,
                      child: Observer(
                        builder: (_) => TextFormField(
                          enabled: false,
                          initialValue: locationEC.city,
                          style: TextStyles.instance.textInput,
                          decoration: InputDecoration(
                            labelText: 'Cidade',
                            fillColor: ColorsApp.instance.background,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),                
              ],
            ),
          ),
        ),
      );
  }
}

fiz a alteração para o campo de CEP, mas o mesmo pode ser feito para todos os campos. Além disso, você pode deixar um único Observer envelopando (wrapping) todos os seus campos, dessa maneira você facilita a leitura do seu widget!

[NicolasHiga]

Deu certo! Mas precisei alterar o cepController.text = locationEC.cep; para fora do Observer(). Estava dando problema no build.
Obrigado!

[HenriqueNas]

Boaa !
não esqueça de marcar esse tópico como resolvido, e qualquer coisa pode me chamar por discord também HenriqueNas#3086