DEV Community

Cover image for FlutterFlow | Popup BottomSheet on the markers for GoogleMap
Tarlan Isaev ๐Ÿ“
Tarlan Isaev ๐Ÿ“

Posted on

FlutterFlow | Popup BottomSheet on the markers for GoogleMap

While developing your app, it could be not quite obvious how to leverage "Markers" all configured at least for me ๐Ÿ™‚

You may need to pass data to another page from the "GoogleMap" page. For example, sending a listing item from "ListView" or "Column" to the "Component" in my case. To pass any data from one page to another component or page, you will need a few parameters. You can think of a parameter as a variable that holds the value being passed from one page to another.

Now, let's configure the essential parts of our app for passing data by creating a page "GoogleMaps" that sends the message from one page to another "Component". You can see the "Users" and "Posts" collections are being passed from one page to the next one down below.

Image description

Here could be your "Query Collection" for any events.

Image description

Add Action in "GoogleMap".

Image description

Passing Parameters from the GoogleMap to the Component

Image description

Add the "Component" to the "Action Type" named "Bottom Sheet" on "GoogleMap".

Image description

In the List or "Column" add "Query Collection". In case, to be able to set "Paths" to a variable.

Image description

Now it's time to define the "Parameters" on the "Details Page" of the component.

Image description

At this moment it should be all set to go. Click-clack - it works ๐Ÿ˜€

Thank you Mike Startup for navigating me in the right direction :)

Top comments (0)