Como utilizar o Observer() do mobX em um TextFormField? #155
Replies: 1 comment 2 replies
-
Salve @NicolasHiga , bom batendo o olho no código, acho que teu problema é setar a propriedade 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! |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Bom, tenho essa classe onde defini minhas variáveis @observable e minha função @action. Testei e tudo está funcionando normal, está retornando certinho.
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):
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?
Beta Was this translation helpful? Give feedback.
All reactions