Build Real-Time Location Tracking in FlutterFlow with Supabase and Google Maps

06/14/2025
by Blupry Admin

Build Real-Time Location Tracking in FlutterFlow with Supabase and Google Maps

An essential feature of modern delivery, logistics, and ride-sharing apps is the ability to track users or vehicles on a map in real time. Whether you're building a ride-hailing platform like Uber, a delivery app like Wolt, or a real-time event coordination tool, live location tracking provides users with a seamless and engaging experience.

While FlutterFlow comes with a built-in GoogleMap widget, which lets you interact with maps, set custom markers, switch between terrain or satellite view, and show traffic overlays, it doesn’t support advanced features like drawing routes or tracking multiple users with animated movement.

That’s where custom FlutterFlow widgets come in — giving you the power to extend functionality beyond the built-in components.

Today, we’ll walk through a custom widget you can drop into any FlutterFlow project: the Supabase Live Tracking & Route Map. With this widget, you can add powerful real-time tracking to your app, synced with Supabase and visualized using Google Maps.

What Does This Widget Do?

The Live Tracking Supabase Map widget is designed to be plug-and-play inside your FlutterFlow app. It continuously displays real-time updates of users’ locations on a Google Map, shows animated movement along a route, and supports multi-user tracking — all while being optimized for performance.

This makes it perfect for:

  • Delivery and logistics tracking

  • Ride-sharing driver/rider location sharing

  • Event or team coordination

  • “Find My Friend” style social features

  • Dating or safety apps with real-time movement

Key Features

Real-Time Live Tracking

As users move, their coordinates are updated in your Supabase database. The map reflects these changes immediately, letting others see their real-time location.

Animated Live Routes

Each user’s path is drawn on the map and smoothly animated as they move — just like in Uber or Wolt. The routing is powered by the Google Maps API and updates automatically.

Multiple Custom Markers

Each user is represented by their profile photo as a map marker. It adds a social and visual feel to the map, especially for multi-user scenarios like group rides or team tracking.

Tap to View User Details

Tap on a user's marker to access their name, photo, and current location — which you can use to trigger modals, user profiles, or detail pages via global state.

Performance Optimized

The map initially centers on the current user and gradually loads other user markers to boost perceived performance and minimize load times.

How It Works Under the Hood

This custom widget integrates with your Supabase backend:

  • Each user’s location and last active timestamp is stored in a Supabase users table.

  • The widget listens for changes and updates the markers in real time.

  • Google Maps handles the route drawing and animation.

  • All user positions are updated asynchronously to allow fluid movement.

Example Use Case: Building a Ride-Hailing App

Let’s say you’re building a simplified Uber-style platform. You can use this widget for both the Driver App and Rider App:

Rider App:

  • Rider chooses a destination and requests a ride.

  • Once a driver accepts, the rider can track their live location on the map.

Driver App:

  • Driver sees available ride requests.

  • After accepting a request, they view the rider’s location and route to the pickup point in real time.

This widget provides the map and tracking logic, while you manage the booking and matching flows through FlutterFlow and Supabase logic/custom functions.

Requirements

To get started, you’ll need:

A complete FlutterFlow project is included and ready to copy. Just plug in your Supabase and Google Maps credentials, and you’re set!

Supported Platforms

The widget is fully cross-platform:

  • Android

  • iOS

  • Web

Wrap-Up

FlutterFlow’s visual development is powerful but combining it with custom widgets like this real-time tracking map lets you build complex, production-level features fast.

Whether you’re launching the next Uber, managing delivery fleets, or adding real-time social features, this widget can be a game-changer.

Ready to try it out?
Start by copying the project into FlutterFlow, connecting it to your Supabase and Google Maps accounts, and you’ll have real-time location tracking up and running in no time.

Let us know how you’re using it, we’d love to see your live apps in action!

Comments

No posts found

Write a review

Recent posts