Map Tracker

Description

This module provides screens and functionality to add a map to your app, with the ability to track the current user location and record all the path the user travel.

The main use-case for this module is to do running apps, real time tracking apps (like delivery apps), or any app that require know where the user is and which route used to move from A to B.

Dependencies

• google_maps_flutter: ^2.6.1
• location: ^6.0.2
• flutter_bloc: ^8.1.5
• sqflite: ^2.3.3+1
• path: ^1.9.0

Google Map Key

To run, this module needs a valid Google Map API Key for Android or iOS. To do that:

• Get an API key at https://cloud.google.com/maps-platform/.

• Enable Google Map SDK for each platform.

  • Go to Google Developers Console.
  • Choose the project that you want to enable Google Maps on.
  • Select the navigation menu and then select “Google Maps”.
  • Select “APIs” under the Google Maps menu.
  • To enable Google Maps for Android, select “Maps SDK for Android” in the “Additional APIs” section, then select “ENABLE”.
  • To enable Google Maps for iOS, select “Maps SDK for iOS” in the “Additional APIs” section, then select “ENABLE”.
  • To enable Google Maps for Web, enable the “Maps JavaScript API”.
  • Make sure the APIs you enabled are under the “Enabled APIs” section.

For more details, see Getting started with Google Maps Platform.

Android

1. Set the minSdkVersion in android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 20
    }
}

This means that app will only be available for users that run Android SDK 20 or higher.

2. Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

3. Add permission in the application manifest “:

<manifest ...>

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

  <application ...

iOS

To set up, specify your API key in the application delegate ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Get started

1. Download the module from our shop and extrat it somewhere.

2. Create a folder called vendors in your project

3. Copy the map_tracker_module folder to the vendors/ folder.

4. Add the dependencies in your’s app pubspec.yml:

dependencies:
  flutter:
    sdk: flutter
  map_tracker_module:
    path: vendors/map_tracker_module

How to configure the module

To use the map tracker you need to add a MapTrackerWidget to your view. This view accept two parameters: a controller and a config.

Config

The config class is an instance of MapTrackerConfig has two properties:

• requestBackgroundLocationPermission: if true, the library will enable background location and it will ask the user for the permission to do it.
• androidNotificationData: a class to configure how the android notification looks when background location is enable. This allow you to customize the title of the notification, channel, etc. It’s only for Android. iOS do not support this.
• mapTrackStyle: style to draw the current route. You can set color, width and join styles of the Polyline.

Controller

The controller allow you to interact with the widget, it has 5 main methods:

• startTracking: Start a tracking session and start listener for location updates. Each location update will be saved in a local database and if there are two or more points it will be paint in the map
• pauseTracking: it will continue listening for location updates but new locations will not be saved.
• stopTracking: all services will be stop. The last tracked route will be show in the map. Data is not deleted.
• clearTracking: remove all local data (in memory and database).
• getTrack: get the list of points that represent the current tracked route.

Example

First, define a controller in your widget state:

MapTrackerController controller = MapTrackerController();

Then add the widget in the build method:

Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title),
  ),
  body: MapTrackerWidget(
    controller: controller,
    config: MapTrackerConfig(
      requestBackgroundLocationPermission: true,
      androidNotificationData: MapTrackerNotificationOptions(
        title: "Awesome Tracker",
        subtitle: "Our tracker is running in the background",
        onTapBringToFront: true,
      ),
    ),
  )
)

If you need to control the map, add buttons and call controller’s methods to run actions on the map:

Row(
  children: [
    ElevatedButton(
      onPressed: () {
        controller.startTracking();
      },
      child: const Text("Start"),
    ),
    ElevatedButton(
      onPressed: () {
        controller.pauseTracking();
      },
      child: const Text("Pause"),
    ),
    ElevatedButton(
      onPressed: () {
        // TODO: Send data to the server
        print(controller.getTrack());
      },
      child: const Text("Save"),
    ),
    ElevatedButton(
      onPressed: () {
        // Stop services
        controller.stopTracking();
        // Remove local data
        controller.clearTracking();
      },
      child: const Text("Clear"),
    ),
  ],
)