Flutter update element create by ui.platformViewRegistry.registerViewFactory class

Question

I am working with Google Map for flutter Website. As most tutorial said that, the map is displayed through ui.platformViewRegistry.registerViewFactory

below is the code example. As you see, i create the widget with the variable and tried to give the _lat and _lng from outside. But after i tried to give the value, the ui.platformViewRegistry.registerViewFactory is not triggered.

I just realize that the ui.platformViewRegistry.registerViewFactory objected to create the element so when the element was created, it will not executed again, but I cannot access the element via document.getElementById('map-canvas') either.

Anyone have idea about this?

Widget getMap(double _lat, double _lng) {
  String htmlId = "map-canvas";

  ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
    // final myLatLng = LatLng(-25.363882, 131.044922);
    final mapOptions = new MapOptions()
      ..zoom = 8
      ..center = new LatLng(_lat, _lng)
      ..mapTypeControl = false;

    final elem = DivElement()
      ..id = htmlId
      ..style.width = "100%"
      ..style.height = "100%"
      ..style.border = "none";

    final map = new GMap(elem, mapOptions);

    Marker(MarkerOptions()
      ..position = LatLng(_lat, _lng)
      ..map = map
      ..title = 'Green Energy');

    return elem;
  });
  return HtmlElementView(
    viewType: htmlId,
  );
}

Solution

I found two ways to solve this problem.

1. It will update the whole view when you change the htmlId and reload. Either determine how the htmlId should change or give it a new random number with every reload. String htmlId = Random().nextInt(1000).toString(); The disadvantage here is that you always reload the whole map.

2. This is the better solution as you dont have to reload the complete map. I also had the problem that i could change values inside the ui.platformViewRegistry.registerViewFactory function with data i give to the getMap widget. So the first part of this solution is to create a global variable that you use inside the ui.platformViewRegistry.registerViewFactory function but update outside. The second part is to use listener functions inside the ui.platformViewRegistry.registerViewFactory. For example map.onClick.listen((mapsMouseEvent) {}); or map.onZoomChanged.listen((_) {}); or a Stream ANY_STREAM_CONTROLLER.stream.listen((data) {}).

If you would like to add new markers when you zoom out you could do it something like this

ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
   map.onZoomChanged.listen((_) {
     List<LatLng> marker_list = list_of_markers(map.zoom, map.center);
     //Function that gives you a list of markers depending on your zoom level and center
     
     marker_list.forEach((latlng){
        Marker marker = Marker(MarkerOptions()
             ..position = latlng
             ..map = map
             ..title = myLatlng.toString()
             ..label = myLatlng.toString());
         });
   });
}

I hope the solution helps you

Comments

[Abubakker Moallim]

You found any solution to this ?