Flutter: Converting Future<List<dynamic>> to List type for use with Google_maps_flutter Package to output Markers

Issue

I am writing an app which pulls date for real estate Listings via an http request.

I use a future and package:http/http.dart to get a json array

Future<List<dynamic>> fetchJson() async {
  final response = await http.get('https://brettransley.com/single.json'); 
  return parseHomes(response.body);
}

List<Properties> parseHomes(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Properties>((json) => Properties.fromJson(json)).toList();
}

I can successfully pull the data and map it through a Property Class. the Future List can be used to output a widget using a FutureBuilder.

final allhomes = fetchJson();
FutureBuilder<List>(
  future: allhomes,
  builder: (BuildContext jsoncontext, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return (Center(child: CircularProgressIndicator()));
    } else {
      return (Container(
        child: ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext homecontext, index) {
            final home = snapshot.data[index];
            return buildHome(context, home);
          },
        ),
      ));
    }
  },
),

My Problem is I would like to use the data from the FutureList to output a Map Markers using the "Google_Map_flutter" Plugin

My Map Code is here:

GoogleMap(
  zoomGesturesEnabled: true,
  mapType: MapType.hybrid,
  onMapCreated: _onMapCreated,
  // markers:
  initialCameraPosition: CameraPosition(
    target: _center,
    zoom: 15.0,
  ),
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
    new Factory<OneSequenceGestureRecognizer>(
      () => new EagerGestureRecognizer(),
    ),
  ].toSet(),
  markers: Set.from(getGeoCords()),
),

In order to output the markers I need to have the getGeoCords() function to return a List, However my data is in a FutureList, I can run through and create and array as attemped here:

getGeoCords() {
  final List homemarkers = [];

  allhomes.then((value) {
    value.forEach((element) {
      print(element);
      homemarkers.add(
        Marker(
          markerId: MarkerId('myMarker'),
          draggable: false,
          onTap: () {
            print('Marker Tapped');
          },
          position:
              LatLng(double.parse(element.lat), double.parse(element.long)),
        ),
      );
    });
  });

  return homemarkers;
}

The Function successfully creates a list that I can use, however the because we are using Future, the function is returning nothing.. until after the google map loads.

Could anyone help me with a solution for converting a FutureList to a List which is able to be used with the google_map_flutter Plugin.

I am fairly new to Flutter, so there may be a gap in my understanding of how things work entirely..

Solution

Ok So Ive figured it out, after building it in a Future Builder It seemed to work.

Code is here:

FutureBuilder(
  future: allhomes,
  builder: (BuildContext jsoncontext, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return (Center(child: CircularProgressIndicator()));
    } else {
      // List<dynamic> parsedJson = jsonDecode(snapshot.data);
      allMarkers = snapshot.data.map((element) {
        return Marker(
          markerId: MarkerId(element.address),
          draggable: false,
          onTap: () {
            print('Marker Tapped');
          },
          position: LatLng(double.parse(element.lat),
              double.parse(element.long)),
        );
      }).toList();

      return SizedBox(
        width: 200,
        height: 450,
        child: GoogleMap(
          zoomGesturesEnabled: true,
          mapType: MapType.hybrid,
          onMapCreated: _onMapCreated,
          // markers:
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 15.0,
          ),
          gestureRecognizers:
              <Factory<OneSequenceGestureRecognizer>>[
            new Factory<OneSequenceGestureRecognizer>(
              () => new EagerGestureRecognizer(),
            ),
          ].toSet(),
          markers: Set.from(allMarkers),
        ),
      );
    }
  },
),

Answered By – Brett

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)