Implementing in-app turn-by-turn navigation in a Flutter application using Google Maps and the Directions API involves several steps

 

1. Integrate Google Maps into Your Flutter App

a. Add the google_maps_flutter Package:

Include the google_maps_flutter package in your pubspec.yaml file to embed Google Maps into your Flutter application.

yaml

dependencies:
  google_maps_flutter: latest_version

b. Obtain and Configure Your API Key:

• Generate an API Key: Create a project in the Google Cloud Console, enable the Maps SDK for Android and Maps SDK for iOS, and generate an API key.

• Configure Android: Add your API key to the AndroidManifest.xml file.

• Configure iOS: Add your API key in the AppDelegate.swift file.

c. Display the Map:

Use the GoogleMap widget to display the map within your application.

#dartcode 

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(latitude, longitude),
    zoom: 14.0,
  ),
  onMapCreated: (GoogleMapController controller) {
    // Map created callback
  },
);

For detailed guidance, refer to the Adding Google Maps to a Flutter app codelab.

---

2. Fetch Directions Using the Google Directions API

a. Enable the Directions API:

In your Google Cloud Console, enable the Directions API for your project.

b. Make HTTP Requests to the Directions API:

Utilize the http package to send requests to the Directions API and retrieve route information.

#dartcode 

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchDirections(LatLng origin, LatLng destination) async {
  final String apiKey = 'YOUR_API_KEY';
  final String url =
      'https://maps.googleapis.com/maps/api/directions/json?origin=${origin.latitude},${origin.longitude}&destination=${destination.latitude},${destination.longitude}&key=$apiKey';

  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    // Parse and use the directions data
  } else {
    // Handle the error
  }
}

For more information, see How to Use Google Directions API in Flutter.

---

3. Parse and Display the Route on the Map

a. Decode the Polyline:

The Directions API response includes an encoded polyline representing the route. Decode this polyline to obtain a list of latitude and longitude points.

#dartcode 

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:polyline/polyline.dart' as polyline;

List<LatLng> decodePolyline(String encoded) {
  List<polyline.PointLatLng> points = polyline.Polyline.Decode(encodedString: encoded, precision: 5).decodedCoords;
  return points.map((point) => LatLng(point.latitude, point.longitude)).toList();
}

b. Display the Route:

Use the Polyline widget to draw the route on the map.

#dartcode 

Set<Polyline> _polylines = {};

void _addPolyline(List<LatLng> points) {
  final String polylineIdVal = 'polyline_id_${_polylines.length}';
  _polylines.add(Polyline(
    polylineId: PolylineId(polylineIdVal),
    width: 5,
    color: Colors.blue,
    points: points,
  ));
}

---

4. Implement Turn-by-Turn Navigation

While Google Maps provides routing information, it doesn't offer an out-of-the-box turn-by-turn navigation UI for Flutter. However, you can utilize the Google Navigation for Flutter plugin, which is currently in beta.

a. Add the google_navigation_flutter Package:

Include the google_navigation_flutter package in your pubspec.yaml file.

#dartcode 

dependencies:
  google_navigation_flutter: latest_version

b. Initialize the Navigation Session:

Set up the navigation session and handle necessary permissions.

#dartcode 

import 'package:google_navigation_flutter/google_navigation_flutter.dart';

Future<void> initializeNavigation() async {
  if (!await GoogleMapsNavigator.areTermsAccepted()) {
    await GoogleMapsNavigator.showTermsAndConditionsDialog(
      'Terms of Service',
      'Your Company Name',
    );
  }
  await GoogleMapsNavigator.initializeNavigationSession();
}

c. Start Navigation:

Use the GoogleMapsNavigationView widget to display the navigation interface.

#dartcode 
GoogleMapsNavigationView(
  onViewCreated: (GoogleNavigationViewController controller) {
    // Configure the controller as needed
  },
  initialNavigationUIEnabledPreference: NavigationUIEnabledPreference.enabled,
  // Additional configuration
);

For comprehensive instructions, refer to the Google Navigation for Flutter plugin repository.

---

5. Alternative Solutions

If you require a more customizable or feature-rich navigation experience, consider using alternative services like Mapbox. The flutter_mapbox_navigation package offers turn-by-turn navigation capabilities.

For a practical demonstration, watch this tutorial:

How to Implement Turn-by-Turn Navigation with Mapbox in Flutter