This is a custom Google Maps widget designed specifically for use within FlutterFlow projects. It enables real-time location tracking for multiple users and displays them on a live map using profile photos as markers.
The widget integrates directly with Firestore and automatically updates the user’s location and last seen time in the users collection. It also fetches other users from Firestore who have location data and shows them on the map. Each marker is tappable and updates global app state values such as user name, image, and coordinates — making it easy to display user details or open a profile modal.
When the widget loads, it centers the map on the current user’s location and gradually loads the remaining markers without delaying the map display. This improves perceived performance and reduces loading time. The current user’s location is visually emphasized with a smooth ripple animation, giving it a subtle radar-style effect.
If a user hasn’t updated their location in the last few minutes, their avatar is shown in a faded grayscale style to indicate offline status. All avatars are downloaded dynamically using the photo URLs stored in Firestore.
The widget includes logic for generating a unique guest ID using shared preferences, so it can be used even if the user isn't authenticated. It also handles live updates through the location package and listens to location changes efficiently without overloading Firestore.
Key Features:
Real-time location updates
Multiple user markers using profile pictures
Offline detection with grayscale fade
Self-marker ripple effect
Smooth performance with async marker loading
Tappable markers with global state integration
Works with both authenticated and guest users
Requirements:
A Firestore collection called users with at least the following fields:
location (GeoPoint), photo_url (String), display_name (String), last_seen (Timestamp)
Cloudinary and Google Maps API key
This widget is ideal for social features, team tracking, live user maps, events, delivery, or anything where you need to see people on a map in real time — similar to Apple’s “Find My” functionality, but built entirely in FlutterFlow.
No reviews found