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
- Flutter (latest stable version)
- Google Maps API (Maps and Directions)
- Packages:
google_maps_flutterfor map renderingflutter_polyline_pointsto decode Google Directions API polylinesgeolocatorfor the current device locationproviderfor state management
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.
- Add the following to your “gradle.properties” file:
android.useAndroidX=true android.enableJetifier=true
- Make sure you set the
compileSdkVersionIn 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's precise location.</string>
</dict>
After we have completed the setup process then we will start the design and implementation of this feature.
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.







