Flutter Mapbox Point extends to MyPoint not return extended vars

Question

Hope you can easily help me to find my error. My code is based on this Example

https://pub.dev/packages/mapbox_maps_flutter/example

I have Modified Point with extension vars to MyPoint

/// Point, as specified here https://tools.ietf.org/html/rfc7946#section-3.1.2
@JsonSerializable(explicitToJson: true)
class MyPoint extends Point {
  int? pinnumber;
  MyPoint({
    super.bbox,
    required super.coordinates,
    this.pinnumber,
  });

  factory MyPoint.fromJson(Map<String, dynamic> json) => _$MyPointFromJson(json);

  @override
  Map<String, dynamic> toJson() => super.serialize(_$MyPointToJson(this));

  @override
  MyPoint clone() => MyPoint(coordinates: coordinates.clone(), bbox: bbox?.clone(), pinnumber: pinnumber);

  @override
  int get hashCode => Object.hashAll([
    type,
    ...coordinates,
    if (bbox != null) ...bbox!,
    if (pinnumber != null) pinnumber!,
  ]);

  @override
  bool operator == (Object other) => other is MyPoint
      ? coordinates == other.coordinates
      : false;
}

When I initialise de Points with addAnnotation

  for (MyPoint pinpoint in pinlist) {
    pointAnnotationManager?.addAnnotation(imageData, pinpoint,);
  }

I can see the new Int "pin number" 1

Also I see the new Int "pinnumber" here 2

Bur not when I read out the Pin on AnnotationClickListener with

final end = MyPoint.fromJson((annotation.geometry)!.cast());

I do get Vars but they are empty!

3

class AnnotationClickListener extends OnPointAnnotationClickListener {
  _MapBoxMapScreenState mapState;

  Animation<double>? animation;
  AnimationController? controller;

  AnnotationClickListener(this.mapState);

  @override
  void onPointAnnotationClick(PointAnnotation annotation) async {
    if (await mapState.mapboxMap.style.styleSourceExists("source")) {
      await mapState.mapboxMap.style.removeStyleLayer("layer");
      await mapState.mapboxMap.style.removeStyleSource("source");
    }

    // build route from puck position to the clicked annotation
    final start = await mapState.mapboxMap.style.getPuckPosition();
    final end = MyPoint.fromJson((annotation.geometry)!.cast());

    final coordinates = await fetchRouteCoordinates(start, end.coordinates, MapsDemo.ACCESS_TOKEN);

    drawRouteLowLevel(coordinates);
  }

  drawRouteLowLevel(List<Position> polyline) async {
    final line = LineString(coordinates: polyline);
    mapState.mapboxMap.style.styleSourceExists("source").then((exists) async {
      if (exists) {
        // if source exists - just update it
        final source = await mapState.mapboxMap.style.getSource("source");
        (source as GeoJsonSource).updateGeoJSON(json.encode(line));
      } else {
        await mapState.mapboxMap.style.addSource(GeoJsonSource(
            id: "source", data: json.encode(line), lineMetrics: true));

        await mapState.mapboxMap.style.addLayer(LineLayer(
          id: 'layer',
          sourceId: 'source',
          lineCap: LineCap.ROUND,
          lineJoin: LineJoin.ROUND,
          lineBlur: 1.0,
          lineColor: Colors.deepOrangeAccent.value,
          lineDasharray: [1.0, 2.0],
          lineTrimOffset: [0.0, 0.0],
          lineWidth: 5.0,
        ));
      }

      // query line layer
      final lineLayer =
          await mapState.mapboxMap.style.getLayer('layer') as LineLayer;

      // draw layer with gradient
      mapState.mapboxMap.style.setStyleLayerProperty("layer", "line-gradient",
          '["interpolate",["linear"],["line-progress"],0.0,["rgb",255,0,0],0.4,["rgb",0,255,0],1.0,["rgb",0,0,255]]');

      // animate layer to reveal it from start to end
      controller?.stop();
      controller = AnimationController(
          duration: const Duration(seconds: 2), vsync: mapState);
      animation = Tween<double>(begin: 0, end: 1.0).animate(controller!)
        ..addListener(() async {
          // set the animated value of lineTrim and update the layer
          lineLayer.lineTrimOffset = [animation?.value, 1.0];
          mapState.mapboxMap.style.updateLayer(lineLayer);
        });
      controller?.forward();
    });
  }
}

Any Idea on my Problem?

Answer 1

Your question gave me a solution for an issue that i could not find its solution.

my issue was, inside 'AnnotationClickListener', I can't call a method on my homePage , it will give me unmount error.

my original code:

class PointAnnotationClickListener extends OnPointAnnotationClickListener {
  @override
  void onPointAnnotationClick(PointAnnotation annotation) {
    print("onAnnotationClick, id: ${annotation.id}");

    _MyHomePageState().showAnnotationDialog(annotation.id);  // <== this will give unmount error.
    
  }
}

after seeing your question, here is my new working code:

    class PointAnnotationClickListener extends OnPointAnnotationClickListener {
  late _MyHomePageState myPageState;

  PointAnnotationClickListener(this.myPageState); // passing the current object of my active homePage.

  @override
  void onPointAnnotationClick(PointAnnotation annotation) {
    print("onAnnotationClick, id: ${annotation.id}");

    myPageState.showAnnotationDialog(annotation.id);
    
  }
}

i hope somebody find it useful as well. thanks for you.