getx and weird problem: text won't change on UI

Question

I am trying to create a search function from firebase
and i am using getx for the state management
I counter this weird problem, when I try to use the function directly it work, but when I use the firebase function it does not.
I will explain more on the code snipit.

this is my search textForm

    TextFormField(
                    onChanged: (value) => database.searchForId(value),
                    decoration: InputDecoration(
                      focusColor: Colors.lightGreenAccent,
                      prefixIcon: Icon(
                        Icons.search,
                        color: Colors.lightGreenAccent,
                      ),
                      labelText: 'Search...',
                      labelStyle: TextStyle(color: Colors.lightGreenAccent),
                      border: OutlineInputBorder(),
                      focusedBorder: OutlineInputBorder(
                        borderSide:
                            const BorderSide(color: Colors.lightGreenAccent),
                      ),
                    )),

as you can see I am using on change value
database code for search

searchForId(searchText) {
    FirebaseFirestore.instance
        .collection('inventory')
        .where('id', isGreaterThanOrEqualTo: searchText)
        .get()
        .then((snapshot) {
      var data = snapshot.docs[0];

      if (data['id'] != searchText) {
        return;
      } else {
        searchController.changeId(data['id']);
        searchController.changeName(data['name']);
        searchController.changeQuantity(data['quantity']);
        searchController.changeCost(data['cost']);
        searchController.changeMyPrice(data['myPrice']);
      }
    });
  }

and the controller

class SearchController extends GetxController {
  var id = 'No info'.obs;
  var name = 'No info'.obs;
  var quantity = 'No info'.obs;
  var cost = 'No info'.obs;
  var myPrice = 'No info'.obs;

  changeId(_id) {
    id(_id);
    print(id);
  }

the print show me that the value is changed, but never update it on my UI

Obx(() => Text(searchController.id.value))

so i trid to call the controller dirctly (not using database file) and it work just fine, and UI updated
any idea why ?
the weird is the print show me the function get called and working fine ( i mean when i use database file as well ) but it never update the UI

Instead of `id(_id);` in the controller change it to `id.value = _id;` — Krish Bhanushali, Jul 24 '21 at 10:05
Have you confirmed the `else` block is even firing in your `searchForId` method? — Loren.A, Jul 25 '21 at 04:27

score 0 · Answer 1 · edited Jul 24 '21 at 10:40

0

I think u forgot to keep

SearchController searchcontroller = Get.put(SearchController());

if you initialized it before just find that controller using

SearchController searchcontroller = Get.find();

edited Jul 24 '21 at 10:40

Peter Haddad

78,874
25
140
134

answered Jul 24 '21 at 10:37

Y.B. Vamsidhar Reddy

139
6

i did that, same problem – haitham almamari Jul 24 '21 at 15:54

score 0 · Answer 2 · answered Aug 19 '21 at 18:03

var id = 'No info'.obs;

searchController.changeId(data['id']);

changeId(_id) {
  id(_id);
  print(id);
}

In order to update your text in UI, you can either update your code

changeId(_id) {
  id(_id);
  print(id);
  update(); // Calling update manually. update() is a function in GetxController to trigger the observable change.
}

or

changeId(String _id) {
  id.value = _id;
}

getx and weird problem: text won't change on UI

2 Answers2