Preventing Background Map Movement When Swiping Images in Modal

Widgets & Design

I'm working on an app that primarily features a map with points of interest. I'm using the Google Maps widget along with several markers. When a marker is clicked, a modal appears, similar to the one in the Google Maps app. This modal overlays the map and contains several images that can be swiped through either by dragging with a finger on a mobile device or by clicking and dragging with a mouse.

The problem I'm encountering is that when I perform this swipe action, the map in the background moves as well, leading to a poor user experience.

RPReplay_Final1715802542.MP4
8.06MB

https://drive.google.com/file/d/1AtnTNhONZpV9TNM_sxbAyqVefImx6pnN/view?usp=sharing

What have you tried so far?

I've tried a couple of approaches to resolve this issue:

  1. Loading the modal component through an action.

  2. Placing the modal component inside a stack along with the Google Maps widget and triggering an animation upon clicking the marker.

Despite these efforts, I haven't been able to fix the problem. Could anyone provide some guidance or suggestions on how to prevent the background map from moving while swiping through images in the modal?

Did you check FlutterFlow's Documentation for this topic?
Yes
3
4 replies