Examples

FlutterFlow actions flow examples

The best way to learn how to use GeoFlowLive is by seeing it in action. This section provides a collection of practical examples, each demonstrating a complete FlutterFlow action flow that leverages GeoFlowLive's custom actions and helper functions.

Use these examples as a starting point for your own projects, and feel free to adapt them to your specific needs.

Initialization flow

This example demonstrates a basic initialization flow for using GeoFlowLive in your FlutterFlow application. Triggered on page load:

1. Checking Location Service Status: The flow first checks if location services are enabled on the device using the geoFlowLiveIsLocationServiceEnabled custom action.

2. Handling Disabled Services: If location services are disabled, an alert dialog is displayed to the user, prompting them to enable location services in their device settings.

3. Requesting Location Permission: If location services are enabled, the flow proceeds to request location permission from the user using the geoFlowLiveRequestLocationPermission custom action.

4. Handling Permission Status: The flow then checks the result of the permission request.

   • If Permission Granted: The flow starts listening for location updates using the geoFlowLiveStartListeningLocationUpdate custom action, configured with your desired settings and callback functions.

   • If Permission Denied: An alert dialog is displayed to the user, informing them that location permission is required for the app to function properly.

Recommendation: To ensure a smooth user experience, it's highly recommended to check and request location permissions on a previous page (e.g., an onboarding screen or settings screen) before starting to listen for location updates. This allows users to grant permissions in a less intrusive way and avoids interrupting the flow of your application.

Page Map

This example demonstrates how to display the user's current location on a map using GeoFlowLive and a map widget in FlutterFlow.

1. Obtain Current Location: Use the geoFlowLiveCurrentPosition custom action (or geoFlowLiveStartListeningLocationUpdate for real-time updates) to obtain the user's current location. Store the resulting GeoFlowLivePositionStruct in a page state variable (e.g., currentPosition).

2. Convert to LatLng: Use the getLatLng helper function to extract the latitude and longitude from the GeoFlowLivePositionStruct and convert it to a LatLng object.

3. Configure the Map Widget:

   • Add a map widget (e.g., Google Map) to your page.

   • Set the map's initial location and zoom level.

   • Configure a marker on the map to display the current location.

4. Bind Marker Location: Bind the marker's LatLng property to the output of the getLatLng helper function (which is using the currentPosition page state variable as its input).

5. Update in Real-Time (Optional): If you're using geoFlowLiveStartListeningLocationUpdate for real-time updates, update the currentPosition page state variable whenever a new location update is received. This will automatically update the marker's position on the map.

Location Update Handler:

This action flow is designed to be used as the onLocationUpdate callback function for the geoFlowLiveStartListeningLocationUpdate custom action. It's responsible for processing new location updates and updating the map accordingly.

1. Check for Valid Position: The flow first checks if the received GeoFlowLivePositionStruct (named position in the image) is not null. This ensures that the flow only proceeds if a valid location update is available.

2. Update Page State: If the position is valid, the flow updates a page state variable (e.g., currentPosition) with the new GeoFlowLivePositionStruct. This makes the updated location data available to other parts of the app.

3. Center Map to New Position: Finally, the flow centers the map to the new location. This typically involves:

   • Using the getLatLng helper function to extract the latitude and longitude from the updated GeoFlowLivePositionStruct (stored in the currentPosition page state variable).

   • Calling the moveCamera method on the map controller to animate the map to the new LatLng.

Stopping Location Updates (On Dispose)

This example demonstrates how to properly stop listening for location updates when they are no longer needed, such as when a user navigates away from a page or closes the app. It's crucial to stop location updates to prevent battery drain and potential memory leaks.

1. Trigger: Set the trigger for this flow to "On Dispose". The "On Dispose" trigger ensures that this action is executed when the page is removed from the screen.

2. Stop Location Updates: Add a Custom Action to the flow.

   • Select the geoFlowLiveStop custom action.

By implementing this simple action flow, you ensure that location updates are stopped when they are no longer required, conserving battery life and preventing potential performance issues.

The example flows provided in this documentation are intended for illustrative purposes only. They are not production-ready and should be adapted and extended based on the specific logic and requirements of your application.