Flutter list stores values using for loop, but loses these values when used outside the loop - flutter

Question

I am trying to read data from a firebase real time database and store it in a list to use in my flutter app.
As seen in the code below, I start by creating a reference to the database. I also create some global variables, where "itemName" stores the name of the item in the database, "itemID" stores the id of each item in the database and "itemNames" is a list of all the item names in the database.
The "activate listeners" method listens to the database, and returns any values if they are changed. Each item ID starts with a J, and continues onto J1, J2, J3 etc. Hence I am using a for loop to access all the item IDs.
The issue I am having is that the itemNames are successfully being stored in the itemNames list, and can be see when I print the list within the for loop (The first print line).
However, when I try print the list value OUTSIDE the for loop, it prints an empty list for loop (second print line).
So in other words, the list is not retaining the elements added to it during the for loop.
Any help would be much appreciated!
final DatabaseReference _dbRef = FirebaseDatabase.instance.ref();
late StreamSubscription _dailySpecialStream;
//Stores the description of each menu item in the DB
String itemName = "";
String itemID = "";
List<String> itemNames = [];
//"Listens for any changes being made to the DB, and updates our app in real time"
void _activateListeners() {
for (int i = 0; i <= 10; i++) {
itemID = "J$i";
_dailySpecialStream =
_dbRef.child("menuItem/$itemID/itemName").onValue.listen((event) {
itemName = event.snapshot.value.toString();
itemNames.addAll([itemName]);
print(itemNames);
});
}
print(itemNames);
}

Answer 1

That is the expected behavior. Data is loaded from Firebase (and most modern cloud APIs) asynchronously, and while that is happening your main code continues to run.
You can most easily see this by placing some print statements:
print('before starting to load data');
for (int i = 0; i <= 10; i++) {
itemID = "J$i";
_dailySpecialStream =
_dbRef.child("menuItem/$itemID/itemName").onValue.listen((event) {
print('loaded data: %i');
});
}
print('after starting to load data');
If you run this, you'll see something like:
before starting to load data
after starting to load data
loaded data: 0
loaded data: 1
loaded data: 2
loaded data: 3
...
So as you can see the after print statement that is lowest in your code, actually printed before any of the data was loaded. This is probably not what you expected, but explains perfectly why the print statement you had outside the loop doesn't print the data: it hasn't been loaded yet!
The solution for this type of problem is always the same: you have to make sure the code that requires the data is inside the callback, or it is called from there, or it is otherwise synchronized.
A simple way to do the latter is by using get() instead of onValue, and then use await on the Future that is returns:
print('before starting to load data');
for (int i = 0; i <= 10; i++) {
itemID = "J$i";
_dailySpecial = await _dbRef.child("menuItem/$itemID/itemName").get();
print('loaded data %i: ${_dailySpecial.value}');
}
print('after starting to load data');
Now with this, the print statements will be in the order you expected.