GoogleMapsFlutter: How to display places stored in Firebase on Google maps in Flutter?

Question

There are many places in my Firebase db an I want to fetch them all and show them on a map. I have been able to show one place, but to display all of the places I need to get the places' geopoints first and show them one by one on the map.

When showing the places as a list, I used ListView.builder, is there a similar way to loop through the places and build the map while fetching each place one by one?

As you can see below because id's value only changed inside the loop, the _buildMap method can't access it.

Widget _getData() {
    var id;
    final length = Provider.of<Places>(context, listen: false).ids.length;
    for (int i = 0; i < length; ++i) {
      Consumer<Places>(
          builder: (context, placesData, _) => FutureBuilder(
              future: placesData.fetchPlace(placesData.ids[i]),
              builder: (_, snapshot) {
                id = placesData.ids[i];
                if (snapshot.connectionState == ConnectionState.waiting)
                  return Text("Loading");

                return _buildMap(placesData.ids[i]);
              }));
    }
    return _buildMap(id);
  } 

 Widget _buildMap(String placeId) {
    final place = Provider.of<Places>(context).findById(placeId);
    final lat = place.geo.latitude;
    final long = place.geo.longitude;
    var center = LatLng(lat, long);
    _addMarker(center, name);
    return Stack(
      children: <Widget>[
        GoogleMap(
          zoomGesturesEnabled: true,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
          initialCameraPosition: CameraPosition(
            target: center,
            zoom: 12.0,
          ),
          myLocationEnabled: true,
          compassEnabled: true,
          markers: _markers,
        ),
        Align(
            alignment: Alignment.topRight,
            child: IconButton(
                icon: Icon(Icons.add_circle_outline),
                color: Colors.green[800],
                iconSize: 30,
                padding: EdgeInsets.fromLTRB(5, 330, 5, 5),
                onPressed: () {
                  _zoomIn(12.0);
                })),
        Align(
            alignment: Alignment.topRight,
            child: IconButton(
                icon: Icon(Icons.remove_circle_outline),
                color: Colors.green[800],
                iconSize: 30,
                padding: EdgeInsets.fromLTRB(5, 270, 5, 5),
                onPressed: () {
                  _zoomOut(12.0);
                }))
      ],
    );