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

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

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

🔗 Скачать Aurora SDK

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

#howtoflutter

Cегодня — день интернета в России! Надеемся, у вас достаточно стабильное соединение, чтобы сохранить эти 10 классных пакетов для работы с интернетом:

1. http
Простой и популярный пакет для выполнения HTTP-запросов (GET, POST и других). Отлично подходит для базовых задач, таких как загрузка данных с API или отправка форм.
🔗http на pub.dev

2. dio
Мощный пакет для HTTP-запросов: с перехватчиками, отменой запросов и управлением тайм-аутами.
🔗dio на pub.dev

3. graphql_flutter
Идеальное решение для интеграции GraphQL-запросов в приложение, если ваш бекэнд работает с GraphQL.
🔗graphql_flutter на pub.dev

4. connectivity_plus
Пакет для мониторинга состояния сети. Поможет отслеживать тип подключения (Wi-Fi, мобильные данные) и доступ в интернет.
🔗connectivity_plus на pub.dev

5. flutter_cache_manager
Этот пакет помогает управлять кэшированием файлов и данных.
🔗flutter_cache_manager на pub.dev

6. web_socket_channel
Пакет для работы с WebSocket-соединениями. Идеально подходит для реального времени, например, в чатах или системах уведомлений.
🔗web_socket_channel на pub.dev

7. retrofit
Клиент REST API, вдохновленный популярным библиотекой Retrofit из мира Android. Помогает сократить количество шаблонного кода.
🔗retrofit на pub.dev

8. flutter_downloader
Этот пакет упрощает скачивание и отображение прогресса. Хорошая штука, если в приложении нужно загружать файлы.
🔗flutter_downloader на pub.dev

9. firebase_storage
Пакет для интеграции с Firebase и хранения медиафайлов в облаке. Идеальный вариант, если ваш основной бэкенд — это Firebase.
🔗firebase_storage на pub.dev

10. flutter_inappwebview
Пакет для работы с веб-контентом. Будет очень полезен, если вы собираетесь внедрить WebView или использовать встроенный браузер.
🔗flutter_inappwebview на pub.dev

Всем быстрого интернета 💜

Привет, это Анна, 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: BitmapDenoscriptor.fromAssetImage('assets/icons/map_point.png'),
            scale: 2,
          ),
        ),
        onTap: (mapObject, point) {
          // действие при нажатии на маркер
        },
        onDrag: (mapObject, point) {
          // действие при перетягивании маркера
        },
      ),
    );

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

#howtoflutter

Юра, Tech Lead Flutter-команды Friflex, вновь на связи!

Как установить Aurora SDK, я уже рассказал. Переходим к настройке эмулятора для Flutter. Просто, как дважды с два, с этой видеоинструкцией🖱

Привет, это Анна, 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

Переходим к установке и настройке Aurora-CLI

На связи Юра, Tech Lead Flutter-команды Friflex, с подробной инструкцией, как это сделать.

📎Как установить Aurora SDK
📎Как настроить эмулятор для Flutter

Наш словарь: фича, легаси, костыль, песочница, ветка, ревью.

Наш стартер-пак: 🖱

Что бы еще добавили?

Привет, это Анна, 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

Рассказали в блоге на Хабре про самые важные пакеты в экосистеме Dart и Flutter и как вообще оценивается их важность. Давайте обсудим 💬

Продолжаем устанавливать Flutter Aurora вместе с Юрой, Tech Lead Flutter-команды Friflex.

📎Как установить Aurora SDK
📎Как настроить эмулятор для Flutter
📎Как установить и настроить Aurora-CLI

Привет, это Анна, 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

#пакет_недели — in_app_review. Он помогает показывать окошки с просьбой поставить оценку или написать отзыв.

Главное про in_app_review

🔸Он вызывает нативные окна запроса отзывов и оценок. Окна появляются прямо в приложении и не нарушают пользовательский опыт.

🔸Разработчик отправляет запрос на показ окна для оценки, но все решает система. Она учитывает разные факторы, такие как частота предыдущих запросов или активность пользователя. Гарантии, что окно покажут, нет.

Например

import 'package:in_app_review/in_app_review.dart';

class MyApp extends StatelessWidget {
  final InAppReview inAppReview = InAppReview.instance;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          noscript: Text('In-App Review Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              if (await inAppReview.isAvailable()) {
                inAppReview.requestReview();
              } else {
                print("In-App Review is not available");
              }
            },
            child: Text('Rate App'),
          ),
        ),
      ),
    );
  }
}

Как работает этот код
1. Импорт библиотеки и создание экземпляра.

2. В интерфейсе приложения создается кнопка (через ElevatedButton), на которую можно нажать, чтобы запросить у пользователя оценку.

3. Когда пользователь нажимает кнопку Rate App, приложение проверяет, доступно ли окно с запросом оценки через функцию isAvailable().

4. Если да, вызывается метод requestReview(), который открывает окно с предложением поставить оценку.

5. Если нет, приложение выводит сообщение в консоль, что запрос оценки сейчас недоступен.

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

🔥 — классный пакет
🙅 — моему приложению и так оставляют отзывы