CODEWITHSUNDEEP
firebaseflutterdartflutter-getx
Phake
Phake

Reputation: 1349

Flutter GetX variable changes but UI does not

I have two RxLists containing custom models:

var openDepartures = RxList<Departure>([]);
var finishedDepartures = RxList<Departure>([]);

I bind a stream to populate these RxLists with values from firebase. Since my Stream(which I am binding to the variables) changes according to the user's choice, I bind the new stream to the same variable, but since that would result in two streams controlling one variable, I "reset" the variable before that:

openDepartures = RxList<Departure>();
finishedDepartures = RxList<Departure>();
....
openDepartures.bindStream(
  Database().getOpenDepartures(
    userController.userLocation.value,
  ),
);
finishedDepartures.bindStream(
  Database().getFinishedDepartures(
    userController.userLocation.value,
  ),
);

The problem is that the UI is not refreshing, but when I do not "reset" the variables, everything works fine. What's weird as well is that the variable does get populated with the correct data. It is just not shown in the UI.

What I have tried to fix that:

My question is now, how do I get the screen to refresh, or does anyone have an idea how to bind a new stream without "resetting" the old one and having multiple streams on one variable?

Upvotes: 2

Views: 1131

Answers (2)

Phake
Phake

Reputation: 1349

I finally solved my problem. The underlying problem was that I was binding multiple streams to one variable and therefore the variable was updated whenever one of the streams fired. The solution was the following:

  • Create an RxList of the variable:

final _openDepartureList = RxList<RxList<Departure>>();

  • Create a getter for the last element of that list:

RxList<Departure> get openDepartures => _openDepartureList.last;

  • Remove the old items:
if (_openDepartureList.length >= 2) {
  _openDepartureList.removeRange(0, _openDepartureList.length - 1);
}
  • Add an empty RxList to the List

_openDepartureList.add(RxList.empty());

  • Bind the stream to the last element of the List, hence the one just added

_openDepartureList.last.bindStream():

That was it! I now always have the right stream bound to the variable I want and do not have multiple streams controlling one variable.

Upvotes: 1

novol
novol

Reputation: 852

use update() like void() { foo = newData; update(); }

or use ProgressIndicator like RxBool loading = false.obs

void Foo() { loading.value = true; your logic... loading.value = false; }

and use controller.loading.value in UI for check progress and show when loading is complete

Upvotes: 0

Related Questions