Делаем простой навигатор с помощью Google Maps на Flutter своими руками

Привет, на связи PurplePlane. Хотим показать простой пример реализации навигации в приложении с помощью Google карт.

Google по каким-то неведомым причинам решил не делать нормальный пакет карт для Flutter, но ничего страшного, давайте это исправлять.

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

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

Создаем несколько переменных:

Первым делом подключаем сами карты, делаем всё по документации. Пакет 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. Перемещать камеру

1. Для отрисовки маршрута используем метод DirectionsService.route(), передаём в него две LatLng точки: координаты водителя и координаты финальной точки и получаем лист LatLng точек. Добавляем полилайн в polylines при помощи класса Polyline(), в который передаём полученные LatLng точки из DirectionsService.route().

При получении координат из стрима обновляем этот полилайн.

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

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

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

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

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

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

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

Ну вот и всё, простенький навигатор готов. Ui делайте по своему вкусу.