Разработка простого навигатора с помощью Google Maps на Flutter

Многие компании сталкиваются с необходимостью создания кастомных навигационных решений, ведь качественно реализованная карта может стать ключевым конкурентным преимуществом — особенно для логистических сервисов, служб доставки и транспортных приложений.

В этой статье мы расскажем, как использовать Google Maps для создания удобного навигатора, и поделимся практическими советами по работе с картами во Flutter.

Читать на Relife
Читать на Дзен

Стоит такая задача: нам известна конечная точка маршрута, надо до неё проложить маршрут, с ведением водителя по маршруту в реальном времени, внизу экрана отображается оставшееся время в пути и дистанция до конечной точки, вверху экрана отображаются подсказки по направлению движения.

Нам потребуется:

• Google_maps_flutter (https://pub.dev/packages/google_maps_flutter)
• Google_directions_api (https://pub.dev/packages/google_directions_api)
• Google_maps_utils (https://pub.dev/packages/google_maps_utils)
• Geolocator (https://pub.dev/packages/geolocator)
• Flutter_html (https://pub.dev/packages/flutter_html)

Первым делом подключаем сами карты, делаем всё по документации. Пакет google_maps_flutter (https://pub.dev/packages/google_maps_flutter).

Далее нам нужно получить стрим координат пользователя, импортируем geolocator (https://pub.dev/packages/geolocator).

Для получения координат надо запросить разрешение на использование геопозиции, используем метод Geolocator.requestPermission. Теперь можно использовать метод Geolocator.getPositionStream для получения стрима координат.
При получении новых координат, старые сохраняем в oldCoordinates.
Конечная точка нам известна, поэтому мы её сразу добавляем в markers при помощи класса Marker().

Теперь нам надо создать функцию, которая при получении координат из стрима будет делать следующие вещи:

1. Отрисовывать маршрут
2. Получать направления движения
3. Получать/обновлять оставшееся время и дистанцию
4. Добавлять/обновлять маркер водителя
5. Перемещать камеру

Для получения направлений движения используем directions api (https://developers.google.com/maps/documentation/directions/overview).

Делаем всё по документации и добавляем полученные данные в directions. При получении координат из стрима обновляем этот список.

Что бы отобразить направления движения импортируем flutter_html (https://pub.dev/packages/flutter_html) и при помощи класса Html() отображаем данные.

Для получения оставшегося времени в пути и дистанции используем distance matrix api (https://developers.google.com/maps/documentation/distance-matrix/overview).

Так же всё делаем по документации и сохраняем полученные данные в time и distance. При получении координат из стрима обновляем эти данные.

Для точки водителя добавляем маркер в markers при помощи класса Marker(). Но при получении новых координат из стрима анимируем его передвижение от координат oldCoordinates до полученных координат из стрима.

Для перемещения камеры создаём controller - googleMapsController.future и используем метод controller.animateCamera() в который передаём координаты из стрима.

В результате мы получили простой навигатор с базовым функционалом: построением маршрута, отслеживанием позиции, расчётом времени и расстояния, а также анимацией движения по карте.

Это стартовая основа, которую можно развивать дальше — добавлять голосовые подсказки, офлайн-режим, оптимизацию маршрутов или интеграцию с системами.

Подобные решения мы регулярно внедряем для наших клиентов из сферы логистики и доставки. Благодаря опыту работы с геосервисами и Flutter мы можем быстро подстроить базовое решение под конкретные задачи бизнеса