Flutter Friendly

#пакет_недели — 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(
          title: 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. Если нет, приложение выводит сообщение в консоль, что запрос оценки сейчас недоступен.

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

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

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

Кофе наготове, эмулятор запущен, а код как всегда полон сюрпризов. Будни наступили! Предлагаем добавить в них немного юмора.

Как проходит день Flutter-разработчика🖱

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

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

Рассказали в блоге на Хабре про самые важные пакеты в экосистеме Dart и 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

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

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

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

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

На связи Юра, 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

Какой канал про Flutter без рубрики #пакет_недели, подумали мы, и вот первый выпуск!

Сегодня рассказываем про Skeletonizer. Этот пакет позволяет создавать скелетоны — упрощенные версии интерфейса, которые пользователь видит, пока контент загружается.

Главное про Skeletonizer:

🔸Он автоматически создает скелетоны. Пакет анализирует дерево виджетов и формирует анимацию загрузки, повторяя их форму, размеры и расположение.

🔸Он поддерживает кастомизацию. Skeletonizer позволяет настроить анимацию, цвет и форму скелетона.

🔸Его легко интегрировать. Можно просто обернуть виджет в Skeletonizer и сразу получить эффект анимации.

🔸Он поддерживает большинство стандартных виджетов. Например, Container, Text, или ListView.

Как использовать

Создадим анимацию загрузки для карточки профиля:

import 'package:flutter/material.dart';
import 'package:skeletonizer/skeletonizer.dart';

class ProfileSkeletonDemo extends StatelessWidget {
  final bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Skeleton Profile Example')),
      body: Center(
        child: Skeletonizer(
          enabled: isLoading,
          child: Card(
            child: ListTile(
              leading: CircleAvatar(radius: 30),
              title: Text('John Doe'),
              subtitle: Text('Flutter Developer'),
            ),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: ProfileSkeletonDemo()));

По умолчанию Skeletonizer создает анимацию, похожую на движущийся светлый блик по заливке виджета. Но ее можно кастомизировать с помощью разных параметров:

backgroundColor: задает основной цвет скелетона.
highlightColor: задает цвет блика.
duration: продолжительность одного цикла анимации.
borderRadius: радиус закругления углов.

Например:

Skeletonizer(
  enabled: true,
  duration: Duration(seconds: 1), // Продолжительность анимации
  backgroundColor: Colors.grey[200], // Цвет фона скелетона
  highlightColor: Colors.grey[100], // Цвет анимированной заливки
  child: YourWidget(),
);

Режим скелетона можно включать и выключать в зависимости от состояния загрузки данных:

Skeletonizer(
  enabled: isLoading, // Условие включения скелетона
  child: isLoading ? Placeholder() : ContentWidget(),
);

❗️Если виджетов много, Skeletonizer может привести к проблемам с производительностью, особенно на слабых устройствах.

🔥— попробуем красивые скелеты Skeletonizer
🙅— вставим из старых проектов

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

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

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

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

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