从子小部件调用 function 动画 map 以移动到点击的 map 图标

Question

I have been trying to figure this out but I am stuck. I have a map where I populates markers on which your are able to click. When I click the marker I want to animate to the marker I pressed. I have the map animation working when I am pressing a dedicated button to test the function and the location of the map is changed.

My marker widget looks like this.

    Marker(
      width: 40,
      height: 40,
      point: LatLng(evcp.location.coordinates.latitude,
          evcp.location.coordinates.longitude),
      builder: (context) => MarkerIcon(
        id: evcp.id,
        latitude: evcp.location.coordinates.latitude,
        longitude: evcp.location.coordinates.longitude,
        animateToPin: _animateMapMove(LatLng(10, 30), 12),
      ),
      anchorPos: AnchorPos.align(AnchorAlign.top),
    ),

And my MarkerIcon widget looks like this:

class MarkerIcon extends StatefulWidget {
  final String id;
  final double latitude;
  final double longitude;
  final Function animateToPin;
MarkerIcon({
  Key? key,
  required this.id,
  required this.latitude,
  required this.longitude,
  required this.animateToPin,
}) : super(key: key);

@override
    State<MarkerIcon> createState() => _MarkerIconState();
}

class _MarkerIconState extends State<MarkerIcon> {
    bool tapped = false;
    @override
    Widget build(BuildContext context) {
        //var markerProvider = Provider.of<MarkerProvider>(context);
        return IconButton(
            onPressed: () => widget.animateToPin(),
    icon: Icon(
      Icons.location_on,
      size: 30,
      color: tapped ? Styles.redColor : Styles.greenColor,
    ));
}

And I am getting this error:

type 'Null' is not a subtype of type 'Function'

Is the issue that I am trying to send the _animateMapMove function from my parent widget to the child widget. If so how can this be solved? Or is it because my Marker has a builder and then when the marker gets build its for some reason doing the animateMapMove ?

Answer 1

Sometime the brain just don't work. To solve the issue I needed to use a anonymous function.

So in the Marker class I needed to change from this:

_animateMapMove()

To this:

() => _animateMapMove()

And in the MarkerIcon I changed this:

onPressed: () => widget.animateToPin()

To this:

onPressed () { widget.animateToPin() }