Scrolling ListView to Corresponding Card on Google Maps Marker Tap

Actions & Logic

Hello! I’m working on a FlutterFlow project using Google Maps and ListView. I have backend data structured as follows:

[
    {
        "customerId": 8,
        "customerName": "Akasya Mall",
        "locationId": 1,
        "locationName": "Akasya Mall",
        "location": {
            "latitude": 41.001381,
            "longitude": 29.054864
        },
        "distanceKm": 0.9194653522132363,
        "workingHours": "08:00-17:00"
    },
    {
        "customerId": 9,
        "customerName": "Emaar Square Mall",
        "locationId": 2,
        "locationName": "Emaar address",
        "location": {
            "latitude": 41.003424,
            "longitude": 29.071344
        },
        "distanceKm": 0.5836609574376709,
        "workingHours": "08:00-17:00"
    }
    // other records...
]

What I’ve Done:

  • I used a custom function to convert the location field in this data into a LatLng<List>, and I’m displaying these on Google Maps as markers.

  • I’m showing the additional details from the backend data (e.g., customerName, distanceKm, etc.) in a ListView, where each card represents one data entry.


Goal: When a marker on the map is tapped, I’d like to automatically scroll the ListView to the card that corresponds to that marker, based on the latitude and longitude.

Could you advise on how to identify the matching card in the ListView by comparing latitude and longitude values, and then programmatically scroll to it? Any help would be greatly appreciated! 🙏

What have you tried so far?

So far, I’ve implemented the following:

1. Converted Location Data: Used a custom function to convert the location field from my backend data into a LatLng<List>, allowing me to plot each location as a marker on Google Maps.

2. Displayed List of Locations: Rendered the other details from the backend data (like customerName, workingHours, etc.) in a ListView, with each entry representing a specific location.

3. Attempted to Set Up Marker Tap Event: Set up an "On Marker Tap" event on Google Maps to capture the latitude and longitude values of the clicked marker.

Current Issue:

I’m struggling to connect this captured latitude and longitude to the matching ListView card, so the ListView automatically scrolls to the card that corresponds to the selected marker. I haven’t yet managed to locate the exact index in the ListView based on latitude and longitude, which would allow me to trigger the scroll.

Any ideas or guidance on how to link the marker to its corresponding ListView item would be very helpful!

Did you check FlutterFlow's Documentation for this topic?
Yes
2