Flutter - Text widget updates one iteration too late

Question

I have declared a text widget as follows:

Text userText = Text("user not found");

I return the widget in my build widget as follows:

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        RepaintBoundary(
          child: userText,
          key: textKey
        ),
        .....

It's inside of a RepaintBoundary because I will transform this widget to a BitmapDescriptor to use it as a marker on my google map.

Then I have the following function to create the markers:

  Future<void> getData() async {
    var map = new Map();
    
    QuerySnapshot querySnapshot = await firestore.collection("users").get(); //get the data
    querySnapshot.docs.forEach((element) { 
      print("Data: ${element.data()['user_uid']}");
      map[element.data()['user_uid']] = element.data()['location']['geopoint'];
    });
    print("-Map- => ${map}");
    
    int id = 0;
    for(var entry in map.entries) {
      _user = entry.key;
      userText = Text('${entry.key}');
      print("USER TEXT: " + userText.toString());
      GeoPoint geo = entry.value;
      print("USER: " + _user);
      print("LOCATION: " + geo.latitude.toString() + " , " + geo.longitude.toString());
      
      BitmapDescriptor testIcon = await getCustomIcon(textKey); //this transforms the Text widget into a BitmapDescriptor
      _markers.add(
        Marker(
          markerId: new MarkerId(id.toString()),
          position: new LatLng(geo.latitude, geo.longitude),
          icon: testIcon
        )
      );
      print("MARKERS IN FOREACH: " + _markers.toString());
      id++;
    }
    print("Map: ${map}");
    setState(() {});
  }

In my Firestore database I have two documents, both with a user_uid and location field. The output of this function is as follows:

I/flutter (13998): USER TEXT: Text("JTtxo8zgjAcsLbTgg753TOacD6R2")
I/flutter (13998): USER: JTtxo8zgjAcsLbTgg753TOacD6R2
I/flutter (13998): LOCATION: 52 , 4
I/flutter (13998): USER TEXT: Text("eBpkVzUPRLPUJHfDyfdo918UcIn1")
I/flutter (13998): USER: eBpkVzUPRLPUJHfDyfdo918UcIn1
I/flutter (13998): LOCATION: 53 , 4

This is exactly what I want. Everything seems to be working. However, on my map there is one marker with the text user not found and there is one marker with the text JTtxo8zgjAcsLbTgg753TOacD6R2. And next to that, the marker with the text JTtxo8zgjAcsLbTgg753TOacD6R2 is on the location 53, 4, and the marker with the text user not found is on the location 52, 4.

So what I'm thinking is that everything works, except that the Text widget is showing the "previous" text. What is the reason for this?

If there's anything unclear, please let me know!

Answer 1

Check this gist: https://gist.github.com/itsJoKr/ce5ec57bd6dedf74d1737c1f39481913

And in your code:

override
void initState() {
  super.initState();

  getData();
}

Future<void> getData() async {
  List<Widget> widgets = [];

  for (int i = 0; i < 5; i++) {
    widgets.add(Text("Number: $i"));
  }

  MarkerGenerator(
    widgets,
    (bitmaps) {
      for (int i = 0; i < 5; i++) {
        _markers.add(Marker(
          markerId: new MarkerId(i.toString()),
          position:
              new LatLng(52.08674971530128 + i / 1000, 4.269159032232106),
          icon: BitmapDescriptor.fromBytes(bitmaps[i]),
        ));
      }
      setState(() {});
    },
  ).generate(context);

  print("Markers: $_markers");
}

Edit:

Because it waits until the images are loaded, sometimes afterFirstLayout is not called, you should change it to this:

class MarkerGenerator {
...
void generate(BuildContext context) {
  if (SchedulerBinding.instance.schedulerPhase == SchedulerPhase.persistentCallbacks) {
    SchedulerBinding.instance.addPostFrameCallback((_) => afterFirstLayout(context));
  } else {
    afterFirstLayout(context);
  }
}