Real-Time Location on Map in Flutter: A Comprehensive Guide with Coding Examples

In today’s digital age, real-time location tracking has become a crucial feature in many mobile applications. Whether it’s for navigation, fleet management, or social networking, the ability to display a user’s live location on a map adds a dynamic and engaging aspect to your app. In this tutorial, we will explore how to implement real-time location tracking on a map using the Flutter framework, along with practical coding examples.

Table of Contents

1. Introduction to Flutter and Maps Integration
2. Setting Up the Project
3. Obtaining User’s Location
4. Displaying Real-Time Location on Map
5. Updating User’s Location in Real Time
6. Enhancing User Experience
7. Conclusion

1. Introduction to Flutter and Maps Integration

Flutter is a popular open-source framework developed by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. It provides a rich set of widgets and tools for creating beautiful and performant applications. To integrate maps into your Flutter app, you can utilize plugins like google_maps_flutter or flutter_map.

2. Setting Up the Project

To get started, create a new Flutter project using your preferred IDE or command line tool. Add the google_maps_flutter package to your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

Run flutter pub get to install the package.

3. Obtaining User’s Location

Before displaying the user’s real-time location on the map, you need to obtain their location. To do this, you can use the geolocator package. Add it to your pubspec.yaml:

dependencies:
  geolocator: ^7.6.2

Here’s an example of how to get the user’s current location:

import 'package:geolocator/geolocator.dart';

Future<Position> getCurrentLocation() async {
  final position = await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high,
  );
  return position;
}

4. Displaying Real-Time Location on Map

Now that you have the user’s location, it’s time to display it on the map. First, create a Google Maps widget and a marker for the user’s location:

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(0, 0), // Initial map center
    zoom: 15.0, // Initial zoom level
  ),
  markers: Set<Marker>.from([
    Marker(
      markerId: MarkerId('user_location'),
      position: LatLng(position.latitude, position.longitude),
      icon: BitmapDescriptor.defaultMarker,
    ),
  ]),
)

In this example, position is the user's current location obtained from the getCurrentLocation() function.

5. Updating User’s Location in Real Time

To achieve real-time location tracking, you can use a package like stream_builder to continuously update the map as the user's location changes:

StreamBuilder<Position>(
  stream: Geolocator.getPositionStream(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final position = snapshot.data;
      return GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(position.latitude, position.longitude),
          zoom: 15.0,
        ),
        markers: Set<Marker>.from([
          Marker(
            markerId: MarkerId('user_location'),
            position: LatLng(position.latitude, position.longitude),
            icon: BitmapDescriptor.defaultMarker,
          ),
        ]),
      );
    }
    return CircularProgressIndicator();
  },
)

6. Enhancing User Experience

To enhance the user experience, consider implementing features like custom marker icons, smooth map animations, and additional UI elements. You can also implement geofencing and notifications to provide timely alerts when the user enters or exits certain areas.

enhancing the user experience is essential to make your real-time location tracking feature more engaging and user-friendly. Let’s dive into some detailed explanations and coding examples for enhancing the user experience in your Flutter app.

Custom Marker Icons

Custom marker icons can make your app’s map more visually appealing and help users distinguish different locations. You can use custom images or icons as markers on the map. Here’s how you can achieve this:

BitmapDescriptor customIcon = await BitmapDescriptor.fromAssetImage(
  ImageConfiguration(size: Size(48, 48)),
  'assets/custom_icon.png', // Replace with your image path
);

Marker(
  markerId: MarkerId('custom_location'),
  position: LatLng(latitude, longitude),
  icon: customIcon,
)

In this example, replace 'assets/custom_icon.png' with the actual path to your custom marker image.

Smooth Map Animations

Smooth animations can greatly improve the user experience by providing seamless transitions when the map updates. Use the CameraPosition class to animate the map camera smoothly:

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(latitude, longitude),
    zoom: 15.0,
  ),
  onMapCreated: (controller) {
    controller.animateCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(target: LatLng(newLatitude, newLongitude), zoom: 15.0),
      ),
    );
  },
)

In this example, newLatitude and newLongitude represent the updated user location.

Adding UI Elements

Adding UI elements like buttons and information panels can enhance user interaction. For instance, you can include buttons to toggle tracking or to switch between different map layers. Here’s an example:

Column(
  children: [
    GoogleMap(
      // Map configuration
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () {
            // Toggle tracking logic
          },
          child: Text('Toggle Tracking'),
        ),
        SizedBox(width: 10),
        ElevatedButton(
          onPressed: () {
            // Switch map layers logic
          },
          child: Text('Switch Layers'),
        ),
      ],
    ),
  ],

Customize the buttons and their functionalities according to your app’s requirements.

Geofencing and Notifications

Geofencing allows you to trigger specific actions when a user enters or exits a predefined geographic area. This can be used to send notifications or perform other actions. Use the geofence package to implement geofencing:

import 'package:geofence/geofence.dart';

Geofence.initialize();
Geofence.registerGeofence(
  GeofenceRegion(
    id: 'my_geofence',
    latitude: targetLatitude,
    longitude: targetLongitude,
    radius: 100, // Radius in meters
    triggers: [GeofenceEvent.enter, GeofenceEvent.exit],
  ),
  (id, location, event) {
    // Handle geofence event, e.g., show a notification
  },
);

In this example, replace targetLatitude and targetLongitude with the coordinates of your geofence area.

User Consent and Privacy

Always prioritize user consent and privacy when dealing with location data. Clearly explain why you’re collecting location data and how it will be used. Provide options to enable/disable location tracking and ensure data security.

Remember, enhancing user experience goes hand in hand with respecting user preferences and privacy.

7. Conclusion

Implementing real-time location tracking on a map in a Flutter app opens up a world of possibilities for various use cases. With the integration of the google_maps_flutter package and the geolocator package, you can easily obtain and display the user's live location. By continuously updating the map using the stream_builder widget, you can achieve a seamless real-time location tracking experience.

Remember that location tracking raises privacy concerns, so always ensure that you have the user’s explicit consent and provide clear information about how their location data will be used.

Incorporate these concepts into your Flutter app to provide a dynamic and engaging real-time location tracking feature that enhances your user’s experience. Happy coding!