Google maps custom widget issues

Hi,

I'm new to FlutterFlow and currently working on building my first app. I've encountered a challenge that I could really use some help with.

On one of my pages, I have a container set up in a stack view, and I've created a custom widget using the google_maps_flutter package from pub.dev. I've also added another container on top of the map to display items fetched from Firebase.

I have a few issues that I am looking for some guidance:
1. When I scroll or navigate through items in my ListView, the map widget underneath also registers the mouse movement, causing the map to move as well. I want the ListView to handle the scrolling independently without affecting the map underneath it. How can I achieve this?

  Widget build(BuildContext context) {
    return Scaffold(
      body: google_maps_flutter.GoogleMap(
        onMapCreated: _onMapCreated,
        zoomGesturesEnabled: widget.allowZoom ?? true,
        zoomControlsEnabled: widget.showZoomControls ?? true,
        myLocationEnabled: widget.showLocation ?? false,
        compassEnabled: widget.showCompass ?? false,
        mapToolbarEnabled: widget.showMapToolbar ?? false,
        trafficEnabled: widget.showTraffic ?? false,
        initialCameraPosition: google_maps_flutter.CameraPosition(
          target: _center,
          zoom: 14.0,
        ),
        markers: _markers,
        polylines: Set<google_maps_flutter.Polyline>.of(_polylines.values),
      ),
    );
  }

2. When I change the markers to be custom markers from my assets it does not display any markers. I can only get the default markers to work

   

   I have markers in my assets named 1.png, 2.png etc. and this is how I try to add it:
   

   Copy

     Future<void> _loadMarkerIcons() async {
       Set<int> uniqueActivityIds =
           _mapData.map((data) => data.activityId).toSet(); // Correct access
   
       for (int id in uniqueActivityIds) {
         final iconPath = 'assets/images/$id.png';
   
         try {
           final google_maps_flutter.BitmapDescriptor descriptor =
               await google_maps_flutter.BitmapDescriptor.fromAssetImage(
             ImageConfiguration(devicePixelRatio: 2.5),
             iconPath,
           );
   
           _customIcons[id.toString()] = descriptor;
         } catch (e) {
           print('Failed to load icon for activityId $id: $e');
         }
       }
   
       _updateMarkers(); // Update markers once icons are loaded
     }

3. I cannot find a way to change the polylines to dashed or dotted. The color seems to work but the patters have no effect.

   Copy

       google_maps_flutter.PolylineId id = google_maps_flutter.PolylineId(
         'poly_${startLatitude}_${startLongitude}_${destinationLatitude}_${destinationLongitude}',
       );
   
       google_maps_flutter.Polyline polyline = google_maps_flutter.Polyline(
         polylineId: id,
         color: Color.fromARGB(255, 25, 219, 138),
         points: _polylineCoordinates
             .map((latLng) =>
                 google_maps_flutter.LatLng(latLng.latitude, latLng.longitude))
             .toList(),
         width: 5, // Adjust the width as needed
         patterns: [
           google_maps_flutter.PatternItem.dash(10), // Dot pattern
           google_maps_flutter.PatternItem.gap(10), // Adjust gap size as needed
         ], // Apply the pattern directly here
       );
   
       setState(() {
         _polylines[id] = polyline;
       });
     }

I would really appreciate your help! Thanks is advance