Flutter - Getx Obx not updating a value

Question

I’m using a widget for collecting user phone contact. The behavior I am expecting is that if there are values for phone numbers, it should be displayed in that widget. On init I’m retrieving the data that needs to be shown in that widget.

void onInit() async {
    super.onInit();
    getCountryFromCode(user?.countryCode ?? '+91');
    _initialPhoneNumber(
        user?.mobileNumber == "null" ? '' : user?.mobileNumber ?? '');
}

I’m using Obx to show these changes inside this widget. However, the value is received and the widget is not updating it. But when I change the page and come back the value is updating. The state only changes when I return to this page.

Here's how I tried to update the widget (I’m using intl_phone_field for phone field)

  Widget mobileField(BuildContext context) {
    final ProfileController _controller = Get.find();
    return Obx(
      () => Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Colors.white,
        ),
        child: IntlPhoneField(
          enabled: true,
          decoration: const InputDecoration(
            border: OutlineInputBorder(
              borderSide: BorderSide(),
            ),
            hintText: 'Mobile number',
            counterText: "",
          ),
          initialValue: _controller.initialPhoneNumber,
          initialCountryCode: _controller.userCountryCode,
          autoValidate: false,
          showCountryFlag: false,
          iconPosition: IconPosition.trailing,
          onChanged: (phone) {
            _controller.onSelectedPhoneNumber(phone);
          },
          onCountryChanged: (phone) {
            _controller.onSelectedPhoneNumber(phone);
          },
        ),
      ),
    );
  }

What is the proper way to display these changes? How can I solve this?

score 0 · Answer 1 · answered Mar 29 '22 at 17:31

0

you can use update() function after changes in controller

example;

void onInit() async {
super.onInit();
getCountryFromCode(user?.countryCode ?? '+91');
_initialPhoneNumber(
    user?.mobileNumber == "null" ? '' : user?.mobileNumber ?? '');
update(); //actually you should use in _initalPhoneNumber function
}

answered Mar 29 '22 at 17:31

Serdar

100
1
5

I have already tried calling update. but it does not have any effect – Febin Johnson Mar 29 '22 at 17:37
can you share _initialPhoneNumber func. maybe you have a issue in function. You should set init value in _controller.initialPhoneNumber – Serdar Mar 29 '22 at 17:58

Vishal Zaveri · Answer 2 · 2022-03-29T17:25:49.287

-1

You need to declare. Obs variable and use it in the UI screen. Just try the below code

void onInit() async {
    super.onInit();
    void onInit() async {
    super.onInit();
    getCountryFromCode(user?.countryCode ?? '+91');
    var mobilenNo = "".obs;
    mobileNo.value = (user?.mobileNumber == "null" ? '' : user?.mobileNumber ?? '');
}

In the UI screen, just use it like:

Controller.mobileNo;

Make sure the widget wraps with the Obs() widget.

Check this link.

edited Mar 29 '22 at 17:25

answered Mar 28 '22 at 16:47

Vishal Zaveri

1,372
2
5
12

I have declared Variables as obs already – Febin Johnson Mar 28 '22 at 17:01
Re *"...Obs variable"*: Do you mean *"...Obx variable"* (it looks like a (true) typo)? – Peter Mortensen Mar 28 '22 at 17:52
final _initialPhoneNumber = ''.obs; String? get initialPhoneNumber => _initialPhoneNumber.value; I have declared variable like this – Febin Johnson Mar 28 '22 at 18:18
Yes, you need to declare var but string obs type variable. Please check my updated answer and you can also check that reference links. – Vishal Zaveri Mar 29 '22 at 17:27

Flutter - Getx Obx not updating a value

2 Answers2