Flutter：将 Future<List<dynamic>> 转换为 List 类型以与 Google_maps_flutter 包一起使用以输出标记

Question

我正在编写一个应用程序，它通过 HTTP 请求提取房地产列表的日期。

我使用 future 和 package:http/http.dart 得到一个 json 数组

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();
}

我可以通过一个属性Class成功拉取数据并映射。 Future List 可用于使用 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);
          },
        ),
      ));
    }
  },
),

我的问题是我想使用 FutureList 中的数据输出地图标记，使用“Google_Map_flutter" 插件

我的地图代码在这里：

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()),
),

为了输出标记，我需要 getGeoCords() 函数到 return 列表，但是我的数据在 FutureList 中，我可以运行通过并按照此处的尝试创建和排列：

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;
}

该函数成功创建了一个我可以使用的列表，但是因为我们使用的是 Future，该函数什么都没有 return.. 直到 google 映射之后负载.

任何人都可以帮助我将 FutureList 转换为列表的解决方案，该列表可以与 google_map_flutter 插件一起使用。

我是 Flutter 的新手，所以我对它的整体运作方式的理解可能存在差距..

Answer 1

您可以将 GoogleMap 小部件包装在 FutureBuilder 中，当未来解决时，您将拥有 Marker 个对象的 List 作为 snapshot.data就像您在代码的另一部分为 ListView.builder 所做的那样。

Answer 2

好的，所以我想通了，在 Future Builder 中构建它之后它似乎工作了。

代码在这里：

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),
        ),
      );
    }
  },
),

Flutter：将 Future<List<dynamic>> 转换为 List 类型以与 Google_maps_flutter 包一起使用以输出标记

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

arraylist

google-maps-markers

flutter

google-maps-flutter