Delivery Boy App Using Flutter Google Map and Provider

0

In this blog, we will learn how to develop the Delivery Boy App using Flutter, Google Maps, and Provider. We have learn to simulate a delivery boy app flow. The app will display a map with pickup and delivery locations, show a route, and simulate marker movement along the polyline—without any backend integration.

Technology Stack and Packages

Add Dependencies

Open your pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  google_maps_flutter: ^2.12.3
  geolocator: ^14.0.2
  provider: ^6.1.5
  flutter_polyline_points: ^3.0.1
  cherry_toast: ^1.13.0 // for toast message
  font_awesome_flutter: ^10.9.1 // for icon

Then install:

flutter pub get

Set up the Environment

Google Maps setup, I have already created a separate blog for Google Maps integration in Flutter.
Geolocator: The geolocator plugin requires the AndroidX version of the Android Support Libraries. This means you need to make sure your Android project supports AndroidX.

  1. Add the following to your “gradle.properties” file:
    android.useAndroidX=true
    android.enableJetifier=true
  2. Make sure you set the compileSdkVersion In your “android/app/build.gradle” file, to 35 or more:
android {
  compileSdkVersion 35

  ...
}

Permissions: On Android, you’ll need to add either the ACCESS_COARSE_LOCATION or the ACCESS_FINE_LOCATION Permission to your Android Manifest. Starting from Android 10, you need to add the ACCESS_BACKGROUND_LOCATION permission. Starting from Android 14 (SDK 34), you need to add the FOREGROUND_SERVICE_LOCATION permission

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

<uses-permission android:name="android.permission.FOREGROUND_SERVICE_LOCATION"

On iOS 16 and above, you need to specify UIBackgroundModes location To receive location updates in the background.

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>UIBackgroundModes</key>
<array>
    <string>location</string>
</array>
<key>NSLocationTemporaryUsageDescriptionDictionary</key>
<dict>
    <key>YourPurposeKey</key>
    <string>The example App requires temporary access to the device&apos;s precise location.</string>
</dict>

After we have completed the setup process then we will start the design and implementation of this feature.

Delivery Boy App

Hardcoded route points
LatLng(27.7033, 85.3066), // Starting point (Kathmandu Durbar Square)
LatLng(27.7020, 85.3078),
LatLng(27.7005, 85.3101),
LatLng(27.6980, 85.3135),
LatLng(27.6950, 85.3160),
LatLng(27.6915, 85.3190),
LatLng(27.6880, 85.3220),
LatLng(27.6845, 85.3235),
LatLng(27.6810, 85.3245),
LatLng(27.6780, 85.3250),
LatLng(27.6750, 85.3252),
LatLng(27.6710, 85.3250), // End point (Patan Durbar Square)

Colors that we have used

import 'dart:ui';
const Color buttonMainColor = Color(0XFFcb0300);
const Color pickedUpColor = Color(0XFFf9843b);
const Color destinationReached = Color(0XFFfd8729);
const Color declineOrder = Color(0XFFf1f2f6);
const Color buttonSecondaryColor = Color(0XFFf7d9db);
const Color backgroundColor = Color(0XFFf5f5f5);
const Color iconColor = Color(0XFF44b180);

Features Implemented

  • Google Maps Setup

    • Displays a Google Map centered on the current location.
    • Supports zoom and map gestures.
  • Polyline & Route Drawing

    • Hardcoded pickup and delivery locations.
    • Route drawn using Google Directions API + polyline points.
  • Accept / Reject Order

    • Accept → Shows the route and starts simulating the delivery boy’s movement.
    • Reject → Hides the route and displays “Order Rejected”.
  • Movement Simulation

    • The delivery boy marker smoothly animates along the polyline path.
    • The camera follows the marker during the trip.
  • UI/UX

    • Clean UI based on the provided Figma design.
    • Styled buttons and layout for a professional look.

This tutorial covers a complete Flutter implementation of a delivery boy route simulation with Google Maps using hardcoded locations and no backend.

  • google_maps_flutter for map rendering and markers
  • flutter_polyline_points to decode routes for polylines
  • geolocator to get the user’s current location or fallback
  • provider for managing UI and route state effectively
  • cherry_toast for aweson toast notification
  • UI with Accept/Reject order and smooth animated delivery boy movement on the route

The app demonstrates core location, map, and state management concepts useful for many delivery or tracking apps.

For the complete code and video tutorial.

Previous articleFirebase Push Notification Flutter
Next articleFlutter Chat App With Firebase

LEAVE A REPLY

Please enter your comment!
Please enter your name here