Привет, это Юра, Tech Lead Flutter-команды Friflex

Меня часто спрашивают, как настроить и установить Flutter Aurora. А вот так!

Записал полную инструкцию. Сегодня подробно покажу, как установить Aurora SDK.

🔗 Скачать Aurora SDK

Что делать дальше, смотрите в следующем выпуске.

#howtoflutter

Привет, это Анна, Team Lead Flutter-команды Friflex

Продолжаю рассказывать, как интегрировать карты в мобильные приложения. Сегодня разберемся, как создать список точек, которые будут отображаться маркерами на карте yandex_mapkit.

Используем класс PlacemarkMapObject. Он принимает разные параметры, которые помогают создать уникальный дизайн маркера и настроить нужные пользовательские взаимодействия:

🔴 icon принимает экземпляр PlacemarkIcon, который позволяет создавать простые и составные иконки
🔴 text дает возможность отображать кастомный текст на маркере
🔴 onTap и onDrag задают взаимодействия с маркером

Создадим список точек Point, которые необходимо отобразить маркерами на карте:

List<Point> get points {
  return const [
    Point(latitude: 55.755864, longitude: 37.617698),
    Point(latitude: 51.507351, longitude: -0.127696),
    Point(latitude: 41.887064, longitude: 12.504809),
  ];
}

Для каждой отдельной точки создаем экземпляр маркера PlacemarkMapObject.

List<PlacemarkMapObject> get mapObjects => List.generate(
      points.length,
      (index) => PlacemarkMapObject(
        mapId: MapObjectId('MapObject $index'),
        point: points[index],
        opacity: 1,
        text: PlacemarkText(
          text: '$index',
          style: const PlacemarkTextStyle(size: 14, color: Colors.white),
        ),
        icon: PlacemarkIcon.single(
          PlacemarkIconStyle(
            image: BitmapDescriptor.fromAssetImage('assets/icons/map_point.png'),
            scale: 2,
          ),
        ),
        onTap: (mapObject, point) {
          // действие при нажатии на маркер
        },
        onDrag: (mapObject, point) {
          // действие при перетягивании маркера
        },
      ),
    );

Список объектов готов. В следующий раз расскажу, как отобразить их на карте.

#howtoflutter

Привет, это Анна, Team Lead Flutter-команды Friflex

Я уже рассказала, как подключить библиотеку yandex_mapkit, чтобы внедрить карту в мобильное приложение, и как создать список точек, которые будут отображаться маркерами на карте.

Библиотека yandex_mapkit предлагает виджет карты, YandexMap, и разные инструменты для работы с ней. Сегодня покажу, как отобразить карту и добавить маркеры объектов на нее.

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

1️⃣ nightModeEnabled включает темную тему
2️⃣ zoomGesturesEnabled разрешает масштабировать карту
3️⃣ onCameraPositionChanged обрабатывает перемещения положения карты
4️⃣ onUserLocationAdded позволяет получить местоположение пользователя

Чтобы отобразить маркеры объектов на карте, нужно передать их список в поле mapObjects виджета YandexMap.

 YandexMap(
        mapObjects: mapObjects,
        zoomGesturesEnabled: true,
        nightModeEnabled: true,
        onMapCreated: (controller) {
          // действие при создании карты
        },
        onCameraPositionChanged: (cameraPosition, reason, finished) {
          // действие при изменении положения камеры
        },
        onUserLocationAdded: (view) {
          // действие при определении местоположения пользователя средствами Яндекс карты
        },
      ),

Готово! В следующий раз рассмотрим, как и зачем использовать кластеризацию объектов.

#howtoflutter

Привет, это Анна, Team Lead Flutter-команды Friflex

Это четвертый пост из серии о том, как интегрировать карты в мобильные приложения. В прошлый раз я рассказывала, как отобразить маркеры объектов на карте. Сегодня поговорим про кластеризацию объектов.

Иногда маркеры расположены слишком близко и при масштабировании карты наслаиваются друг на друга. При нажатии на один маркер в этом случае может вызываться обработчик из соседнего. Решить эти проблемы поможет кластеризация маркеров.

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

Для реализации кластеризации в yandex_mapkit существует специальный класс — ClusterizedPlacemarkCollection. У него есть обязательные параметры:

🔴mapId — уникальный идентификатор объекта

🔴placemarks — список маркеров, которые в случае изменения масштаба объединяются в кластеры

🔴radius — минимальное расстояние между точками на карте, которые остаются разделенными и не входят в кластеры

🔴minZoom — минимальный уровень масштабирования, при котором отображаются кластеры

Изменить внешний вид кластера можно через обратный вызов onClusterAdded(). Он вызывается каждый раз, когда после изменения масштаба карты создаются новые кластеры или удаляются старые.

Cluster — объект кластера, который хранит в себе данные об объединенных маркерах, их количестве и своем внешнем виде.

Класс Cluster реализует метод copyWith(), который обеспечивает иммутабельность текущему объекту кластера. С помощью этого метода можно вернуть новый экземпляр класса. От текущего он будет отличаться параметрами, которые заданы в copyWith().

Чтобы изменить внешний вид в onClusterAdded(), нужно вернуть экземпляр Cluster с измененным через copyWith() параметром appearance.

Параметр appearance типизирован как PlacemarkMapObject, поэтому принцип построения иконки и внешнего вида у кластера такой же, как у обычного маркера.

Чтобы отобразить маркеры с кластеризацией на карте, объект ClusterizedPlacemarkCollection нужно передать в поле mapObjects виджета YandexMap.

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

#howtoflutter

Привет, это Анна, Team Lead Flutter-команды Friflex

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

Библиотека yandex_mapkit предлагает такую возможность при помощи метода setMapStyle у контроллера карты YandexMapController. Метод принимает строку json-массива с заданными параметрами стилей карты.

Каждый вложенный json в массиве должен формироваться по ключам:
🔸 tags — набор тегов объектов
🔸 types — типы объектов, к которым должны применяться стили, например, линии, точки, зоны
🔸 elements — составляющие объекта, например, подпись объекта, иконка или текст, и его область
🔸 stylers — параметры стиля объекта, например, видимость, цвет, размер

Чтобы получить нужный стиль, комбинируйте параметры объектов. Например, можно скрыть все объекты торговли и общественного питания и подсветить названия дорог красным цветом.

await mapController.setMapStyle('''
          [
            {
              "tags": {
                "any": ["shopping", "food_and_drink"]
              },
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "tags": {
                "all": ["road"]
              },
              "elements": ["label.text"],
              "stylers": {
                "color": "0xFF5757"
              }
            }
          ]
        ''');

Больше параметров стилизации описано в документации.

В следующий раз разберем, как построить пешеходный маршрут от точки А до точки Б и отобразить его на карте.

#howtoflutter