Postgres can handle geography data efficiently thanks to the PostGIS extension. Combining it with Supabase realtime and you can create a real-time location tracking app.
In this tutorial, we will guide you through the process of creating an Uber-like application using Flutter and Supabase. This project demonstrates the capabilities of Supabase for building complex, real-time applications with minimal backend code.
An actual Uber app has two apps, the consumer facing app and the driver facing app. This article only covers the consumer facing app. The app works by first choosing a destination, and then waiting for the driver to come pick them up. Once they are picked up, they head to the destination and the journey is complete once they arrive at the destination. Throughout the lifecycle of the app, the driver’s position is shared on screen in real-time.
The focus of the app is to showcase how to use Supabase realtime with geographical data, so handling payments will not be covered in this article.
Before beginning, ensure you have:
- Flutter installed
- A Supabase account - head to database.new if you don’t have one yet.
- Basic knowledge of Dart and Flutter
Start by creating a blank Flutter project.
_10
flutter create canvas --empty --platforms=ios,android
Then, add the required dependencies to your pubspec.yaml file:
_10
supabase_flutter: ^2.5.9
_10
google_maps_flutter: ^2.7.0
_10
geolocator: ^12.0.0
_10
duration: ^3.0.13
_10
intl: ^0.19.0
google_maps_flutter is used to display the map on our app. We will also draw and move icons on the map. geolocator is used to access the GPS information. duration is used to parse duration value returned from Google’s routes API, and intl is used to display currencies nicely.
In addition to adding it to pubspec.yaml file, google_maps_flutter requires additional setup to get started. Follow the readme.md file to configure Google Maps for the platform you want to support.
Run flutter pub get to install these dependencies.
In your main.dart file, initialize Supabase with the following code:
_11
import 'package:supabase_flutter/supabase_flutter.dart';
_11
_11
void main() async {
_11
await Supabase.initialize(
_11
url: 'YOUR_SUPABASE_URL',
_11
anonKey: 'YOUR_SUPABASE_ANON_KEY',
_11
);
_11
runApp(const MainApp());
_11
}
_11
_11
final supabase = Supabase.instance.client;
Replace YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY with your actual Supabase project credentials.
We need to create two tables for this application. The drivers table holds the vehicle information as well as the position. Notice that we have a latitude and longitude generated column. These columns are generated from the location column, and will be used to display the real-time location on the map later on.
The rides table holds information about customer’s request to get a ride.
_24
-- Enable the "postgis" extension
_24
create extension postgis with schema extensions;
_24
_24
create table if not exists public.drivers (
_24
id uuid primary key default gen_random_uuid(),
_24
model text not null,
_24
number text not null,
_24
is_available boolean not null default false,
_24
location geography(POINT) not null,
_24
latitude double precision generated always as (st_y(location::geometry)) stored,
_24
longitude double precision generated always as (st_x(location::geometry)) stored
_24
);
_24
_24
create type ride_status as enum ('picking_up', 'riding', 'completed');
_24
_24
create table if not exists public.rides (
_24
id uuid primary key default gen_random_uuid(),
_24
driver_id uuid not null references public.drivers(id),
_24
passenger_id uuid not null references auth.users(id),
_24
origin geography(POINT) not null,
_24
destination geography(POINT) not null,
_24
fare integer not null,
_24
status ride_status not null default 'picking_up'
_24
);
Let’s also set row level security policies for the tables to secure our database.
_10
alter table public.drivers enable row level security;
_10
create policy "Any authenticated users can select drivers." on public.drivers for select to authenticated using (true);
_10
create policy "Drivers can update their own status." on public.drivers for update to authenticated using (auth.uid() = id);
_10
_10
alter table public.rides enable row level security;
_10
create policy "The driver or the passenger can select the ride." on public.rides for select to authenticated using (driver_id = auth.uid() or passenger_id = auth.uid());
_10
create policy "The driver can update the status. " on public.rides for update to authenticated using (auth.uid() = driver_id);
Lastly, we will create a few database functions and triggers. The first function and trigger updates the driver status depending on the status of the ride. This ensures that the driver status is always in sync with the status of the ride.
The second function is for the customer to find available drivers. This function will be called from the Flutter app, which automatically find available drivers within 3,000m radius and returns the driver ID and a newly created ride ID if a driver was found.
_52
-- Create a trigger to update the driver status
_52
create function update_driver_status()
_52
returns trigger
_52
language plpgsql
_52
as $$
_52
begin
_52
if new.status = 'completed' then
_52
update public.drivers
_52
set is_available = true
_52
where id = new.driver_id;
_52
else
_52
update public.drivers
_52
set is_available = false
_52
where id = new.driver_id;
_52
end if;
_52
return new;
_52
end $$;
_52
_52
create trigger driver_status_update_trigger
_52
after insert or update on rides
_52
for each row
_52
execute function update_driver_status();
_52
_52
-- Finds the closest available driver within 3000m radius
_52
create function public.find_driver(origin geography(POINT), destination geography(POINT), fare int)
_52
returns table(driver_id uuid, ride_id uuid)
_52
language plpgsql
_52
as $$
_52
declare
_52
v_driver_id uuid;
_52
v_ride_id uuid;
_52
begin
_52
select
_52
drivers.id into v_driver_id
_52
from public.drivers
_52
where is_available = true
_52
and st_dwithin(origin, location, 3000)
_52
order by drivers.location <-> origin
_52
limit 1;
_52
_52
-- return null if no available driver is found
_52
if v_driver_id is null then
_52
return;
_52
end if;
_52
_52
insert into public.rides (driver_id, passenger_id, origin, destination, fare)
_52
values (v_driver_id, auth.uid(), origin, destination, fare)
_52
returning id into v_ride_id;
_52
_52
return query
_52
select v_driver_id as driver_id, v_ride_id as ride_id;
_52
end $$ security definer;
Start by defining the models for this app. The AppState enum holds the 5 different state that this app could take in the order that it proceeds. The Ride and Driver class are simple data class for the rides and drivers table we created earlier.
_66
enum AppState {
_66
choosingLocation,
_66
confirmingFare,
_66
waitingForPickup,
_66
riding,
_66
postRide,
_66
}
_66
_66
enum RideStatus {
_66
picking_up,
_66
riding,
_66
completed,
_66
}
_66
_66
class Ride {
_66
final String id;
_66
final String driverId;
_66
final String passengerId;
_66
final int fare;
_66
final RideStatus status;
_66
_66
Ride({
_66
required this.id,
_66
required this.driverId,
_66
required this.passengerId,
_66
required this.fare,
_66
required this.status,
_66
});
_66
_66
factory Ride.fromJson(Map<String, dynamic> json) {
_66
return Ride(
_66
id: json['id'],
_66
driverId: json['driver_id'],
_66
passengerId: json['passenger_id'],
_66
fare: json['fare'],
_66
status: RideStatus.values
_66
.firstWhere((e) => e.toString().split('.').last == json['status']),
_66
);
_66
}
_66
}
_66
_66
class Driver {
_66
final String id;
_66
final String model;
_66
final String number;
_66
final bool isAvailable;
_66
final LatLng location;
_66
_66
Driver({
_66
required this.id,
_66
required this.model,
_66
required this.number,
_66
required this.isAvailable,
_66
required this.location,
_66
});
_66
_66
factory Driver.fromJson(Map<String, dynamic> json) {
_66
return Driver(
_66
id: json['id'],
_66
model: json['model'],
_66
number: json['number'],
_66
isAvailable: json['is_available'],
_66
location: LatLng(json['latitude'], json['longitude']),
_66
);
_66
}
_66
}
Step 5: Main UI Implementation#
Create a UberCloneMainScreen widget to serve as the main interface for the application. This widget will manage the five different AppState that we created in the previous step.
- Location selection - The customer scrolls through the map and chooses the destination
- Fare confirmation - The fare is displayed to the user, and the customer can accept the fare to find a nearby driver
- Pickup waiting - A driver was found, and the customer is waiting for the driver to arrive
- In-ride - The customer has got on the car, and they are headed to the destination
- Post-ride - The customer has arrived at the destination, and a thank you modal is displayed
For statuses 3, 4, and 5, the status update happens on the driver’s app, which we don’t have. So you can directly modify the data from the Supabase dashboard and update the status of the ride.
_152
class UberCloneMainScreen extends StatefulWidget {
_152
const UberCloneMainScreen({super.key});
_152
_152
@override
_152
UberCloneMainScreenState createState() => UberCloneMainScreenState();
_152
}
_152
_152
class UberCloneMainScreenState extends State<UberCloneMainScreen> {
_152
AppState _appState = AppState.choosingLocation;
_152
GoogleMapController? _mapController;
_152
_152
/// The default camera position is arbitrarily set to San Francisco.
_152
CameraPosition _initialCameraPosition = const CameraPosition(
_152
target: LatLng(37.7749, -122.4194),
_152
zoom: 14.0,
_152
);
_152
_152
/// The selected destination by the user.
_152
LatLng? _selectedDestination;
_152
_152
/// The current location of the user.
_152
LatLng? _currentLocation;
_152
_152
final Set<Polyline> _polylines = {};
_152
final Set<Marker> _markers = {};
_152
_152
/// Fare in cents
_152
int? _fare;
_152
StreamSubscription<dynamic>? _driverSubscription;
_152
StreamSubscription<dynamic>? _rideSubscription;
_152
Driver? _driver;
_152
_152
LatLng? _previousDriverLocation;
_152
BitmapDescriptor? _pinIcon;
_152
BitmapDescriptor? _carIcon;
_152
_152
@override
_152
void initState() {
_152
super.initState();
_152
_signInIfNotSignedIn();
_152
_checkLocationPermission();
_152
_loadIcons();
_152
}
_152
_152
@override
_152
void dispose() {
_152
_cancelSubscriptions();
_152
super.dispose();
_152
}
_152
_152
// TODO: Add missing methods
_152
_152
@override
_152
Widget build(BuildContext context) {
_152
return Scaffold(
_152
appBar: AppBar(
_152
title: Text(_getAppBarTitle()),
_152
),
_152
body: Stack(
_152
children: [
_152
_currentLocation == null
_152
? const Center(child: CircularProgressIndicator())
_152
: GoogleMap(
_152
initialCameraPosition: _initialCameraPosition,
_152
onMapCreated: (GoogleMapController controller) {
_152
_mapController = controller;
_152
},
_152
myLocationEnabled: true,
_152
onCameraMove: _onCameraMove,
_152
polylines: _polylines,
_152
markers: _markers,
_152
),
_152
if (_appState == AppState.choosingLocation)
_152
Center(
_152
child: Image.asset(
_152
'assets/images/center-pin.png',
_152
width: 96,
_152
height: 96,
_152
),
_152
),
_152
],
_152
),
_152
floatingActionButton: _appState == AppState.choosingLocation
_152
? FloatingActionButton.extended(
_152
onPressed: _confirmLocation,
_152
label: const Text('Confirm Destination'),
_152
icon: const Icon(Icons.check),
_152
)
_152
: null,
_152
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
_152
bottomSheet: _appState == AppState.confirmingFare ||
_152
_appState == AppState.waitingForPickup
_152
? Container(
_152
width: MediaQuery.of(context).size.width,
_152
padding: const EdgeInsets.all(16)
_152
.copyWith(bottom: 16 + MediaQuery.of(context).padding.bottom),
_152
decoration: BoxDecoration(
_152
color: Colors.white,
_152
boxShadow: [
_152
BoxShadow(
_152
color: Colors.grey.withOpacity(0.5),
_152
spreadRadius: 5,
_152
blurRadius: 7,
_152
offset: const Offset(0, 3),
_152
),
_152
],
_152
),
_152
child: Column(
_152
mainAxisSize: MainAxisSize.min,
_152
children: [
_152
if (_appState == AppState.confirmingFare) ...[
_152
Text('Confirm Fare',
_152
style: Theme.of(context).textTheme.titleLarge),
_152
const SizedBox(height: 16),
_152
Text(
_152
'Estimated fare: ${NumberFormat.currency(
_152
symbol:
_152
'\$', // You can change this to your preferred currency symbol
_152
decimalDigits: 2,
_152
).format(_fare! / 100)}',
_152
style: Theme.of(context).textTheme.titleMedium),
_152
const SizedBox(height: 16),
_152
ElevatedButton(
_152
onPressed: _findDriver,
_152
style: ElevatedButton.styleFrom(
_152
minimumSize: const Size(double.infinity, 50),
_152
),
_152
child: const Text('Confirm Fare'),
_152
),
_152
],
_152
if (_appState == AppState.waitingForPickup &&
_152
_driver != null) ...[
_152
Text('Your Driver',
_152
style: Theme.of(context).textTheme.titleLarge),
_152
const SizedBox(height: 8),
_152
Text('Car: ${_driver!.model}',
_152
style: Theme.of(context).textTheme.titleMedium),
_152
const SizedBox(height: 8),
_152
Text('Plate Number: ${_driver!.number}',
_152
style: Theme.of(context).textTheme.titleMedium),
_152
const SizedBox(height: 16),
_152
Text(
_152
'Your driver is on the way. Please wait at the pickup location.',
_152
style: Theme.of(context).textTheme.bodyMedium),
_152
]
_152
],
_152
),
_152
)
_152
: const SizedBox.shrink(),
_152
);
_152
}
_152
}
The code above still has many missing methods, so do not worry if you see many errors.
The way the customer chooses the destination is by scrolling through the map and tapping on the confirmation FAB. Once the FAB is pressed, the _confirmLocation method is called, which calls a Supabase Edge Function called route. This route function returns a list of coordinates to create a polyline to get from the current location to the destination. We then draw the polyline on the Google Maps to provide to simulate an Uber-like user experience.
_72
Future<void> _confirmLocation() async {
_72
if (_selectedDestination != null && _currentLocation != null) {
_72
try {
_72
final response = await supabase.functions.invoke(
_72
'route',
_72
body: {
_72
'origin': {
_72
'latitude': _currentLocation!.latitude,
_72
'longitude': _currentLocation!.longitude,
_72
},
_72
'destination': {
_72
'latitude': _selectedDestination!.latitude,
_72
'longitude': _selectedDestination!.longitude,
_72
},
_72
},
_72
);
_72
_72
final data = response.data as Map<String, dynamic>;
_72
final coordinates = data['legs'][0]['polyline']['geoJsonLinestring']
_72
['coordinates'] as List<dynamic>;
_72
final duration = parseDuration(data['duration'] as String);
_72
_fare = ((duration.inMinutes * 40)).ceil();
_72
_72
final List<LatLng> polylineCoordinates = coordinates.map((coord) {
_72
return LatLng(coord[1], coord[0]);
_72
}).toList();
_72
_72
setState(() {
_72
_polylines.add(Polyline(
_72
polylineId: const PolylineId('route'),
_72
points: polylineCoordinates,
_72
color: Colors.black,
_72
width: 5,
_72
));
_72
_72
_markers.add(Marker(
_72
markerId: const MarkerId('destination'),
_72
position: _selectedDestination!,
_72
icon: _pinIcon ??
_72
BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
_72
));
_72
});
_72
_72
LatLngBounds bounds = LatLngBounds(
_72
southwest: LatLng(
_72
polylineCoordinates
_72
.map((e) => e.latitude)
_72
.reduce((a, b) => a < b ? a : b),
_72
polylineCoordinates
_72
.map((e) => e.longitude)
_72
.reduce((a, b) => a < b ? a : b),
_72
),
_72
northeast: LatLng(
_72
polylineCoordinates
_72
.map((e) => e.latitude)
_72
.reduce((a, b) => a > b ? a : b),
_72
polylineCoordinates
_72
.map((e) => e.longitude)
_72
.reduce((a, b) => a > b ? a : b),
_72
),
_72
);
_72
_mapController?.animateCamera(CameraUpdate.newLatLngBounds(bounds, 50));
_72
_goToNextState();
_72
} catch (e) {
_72
if (mounted) {
_72
ScaffoldMessenger.of(context).showSnackBar(
_72
SnackBar(content: Text('Error: ${e.toString()}')),
_72
);
_72
}
_72
}
_72
}
_72
}
Let’s also create the route edge functions. This function calls the routes API from Google, which provides us the array of lines on the map to take us from the customer’s current location to the destination.
Run the following commands to create the edge functions.
_10
# initialize Supabase
_10
npx supabase init
_10
_10
# Create a new function named route
_10
npx supabase functions new route
_46
type Coordinates = {
_46
latitude: number
_46
longitude: number
_46
}
_46
_46
Deno.serve(async (req) => {
_46
const {
_46
origin,
_46
destination,
_46
}: {
_46
origin: Coordinates
_46
destination: Coordinates
_46
} = await req.json()
_46
_46
const response = await fetch(
_46
`https://routes.googleapis.com/directions/v2:computeRoutes?key=${Deno.env.get(
_46
'GOOGLE_MAPS_API_KEY'
_46
)}`,
_46
{
_46
method: 'POST',
_46
headers: {
_46
'Content-Type': 'application/json',
_46
'X-Goog-FieldMask':
_46
'routes.duration,routes.distanceMeters,routes.polyline,routes.legs.polyline',
_46
},
_46
body: JSON.stringify({
_46
origin: { location: { latLng: origin } },
_46
destination: { location: { latLng: destination } },
_46
travelMode: 'DRIVE',
_46
polylineEncoding: 'GEO_JSON_LINESTRING',
_46
}),
_46
}
_46
)
_46
_46
if (!response.ok) {
_46
const error = await response.json()
_46
console.error({ error })
_46
throw new Error(`HTTP error! status: ${response.status}`)
_46
}
_46
_46
const data = await response.json()
_46
_46
const res = data.routes[0]
_46
_46
return new Response(JSON.stringify(res), { headers: { 'Content-Type': 'application/json' } })
_46
})
Once the function is ready, you can run it locally or Read the original source
0 Comments
Log in to join the conversation.No comments yet. Be the first to share your thoughts.