Flutter - Iterar array on a map

Question

Flutter - Iterar array on a map

Navigation

#1 by (0 votes)

0

I am currently developing a mobile application with Flutter. Everything goes well in principle, but I need to implement a map. Since Google has not yet developed a stable package I'm using flutter_chart using Leaflet.

I can paint a map, but the problem comes when I try to paint an array. I currently have this.

 MapController mapController;
  Map<String, LatLng> coords;
  List<Marker> markers;
  List<Map<String, LatLng>> listado = [];

  Future<Null> fetchPost() async {
    final response = await http.get(url);
    final responseJson = json.decode(response.body);
    for (Map user in responseJson) {
      coords.putIfAbsent("Test", () => new LatLng(user['lat'], user['long']));
      listado.add(coords);
     // print(listado.toList());
    }
  }

 void initState() {
super.initState();
mapController = new MapController();
coords = new Map<String, LatLng>();
fetchPost().then((data) {
  print(data);
  for (int i = 0; i < listado.length; i++) {
    markers.add(new Marker(
        width: 80.0,
        height: 80.0,
        point: coords.values.elementAt(i),
        builder: (ctx) => new Icon(Icons.home, color: Colors.red[300])));
  }
});
 }

  @override
  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(37.7525244, 139.1650556),
        zoom: 5.0,
      ),
      mapController: mapController,
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        new MarkerLayerOptions(markers: markers)
      ],
    );
  }
}

final String url =
    'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates';

//STATES
class UserDetails {
  final String name;
  final double lat, long;

  UserDetails({this.name, this.lat, this.long});

  factory UserDetails.fromJson(Map<dynamic, dynamic> json) {
    return new UserDetails(
      name: json['name'],
      lat: json['lat'],
      long: json['long'],
    );
  }
}

Returns to me

But return 'the getter iterator was called on null'. The data has this json

That is, when doing the for it fails because lista.length is empty. Obviously all that happens because in then the data does not arrive, however the array listed in the fetchPost () method does have data. I guess the problem is in that method and how I return the list. Any ideas?

map flutter

asked by El Hombre Sin Nombre 20.11.2018 в 22:08

source

1 answer

How to avoid flashing in console in c and the trace of a moving character Redirect from one domain to another and mask

score 0 · Accepted Answer

The service returns an array not a map, so you must iterate the array, you can do it like this:

          Future<Null> fetchPost() async {
            list = List();
            markers = List();
            mapController = new MapController();
            coords = new Map<String, LatLng>();
            final response = await http.get(
                'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates');
            final List responseJson = json.decode(response.body) as List;
            for (Map<String, dynamic> data in responseJson) {
                    _counter++;
              coords.putIfAbsent("Test $_counter", () => new LatLng(double.parse(data['lat'].toString()),  double.parse(data['long'].toString())));
             print(coords);
             list.add(coords);
              // print(listado.toList());
            }
            return;
          }