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

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

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

#пакет_недели — flutter_barcode_scanner. Он позволяет интегрировать сканирование штрихкодов и QR-кодов в кроссплатформенные приложения.

Главное о flutter_barcode_scanner
🔴Поддерживает штрихкоды (UPC,EAN, Code128) и QR-коды

🔴Позволяет настраивать цвет подсветки для области сканирования и текст для кнопки отмены

🔴Сканирование работает локально и не требует подключения к интернету

Как использовать
Запускаем сканирование штрихкодов с помощью метода scanBarcode:

String barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
                                                    COLOR_CODE, 
                                                    CANCEL_BUTTON_TEXT, 
                                                    isShowFlashIcon, 
                                                    scanMode);

🔸COLOR_CODE — задает цвет линии в интерфейсе сканирования. Можно передать любой цвет по вашему выбору в формате hex.

🔸CANCEL_BUTTON_TEXT — текст для кнопки отмены на экране. Вы можете задать любой текст на любом языке.

🔸isShowFlashIcon — булевое значение (true/false). Оно позволяет отображать или скрывать иконки вспышки.

🔸scanMode — перечисление, в котором можно передать одно из значений: QR, BARCODE, или DEFAULT. По умолчанию scanMode использует QR.

⚡На Android ничего дополнительно делать не нужно, а на iOS требуется поддержка Swift и добавить описание использования камеры в файл Info.plist.

🔥 — классный пакет, обязательно попробую
🔧 — предпочитаю собственное решение

Привет, это Екатерина. Я Flutter-разработчик в команде Friflex.

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

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

Кажется, что было бы здорово использовать его в проекте. Добавляем следующие зависимости в pubspec:

dependencies:
 flutter:
   sdk: flutter

 # Для получения данных о погоде
 http: ^1.2.2
 # Для иконок погоды
 weather_icons: ^3.0.0

Теперь с пакетом иконок нам не нужно самостоятельно добавлять ассеты для разных состояний погоды. Кажется, что мы освободили себя от значительного объема работы. Вот только:

🔴Библиотека содержит в себе более 200 ассетов, когда нам нужны условные 15

🔴Она, неожиданно, усложняет онбординг новых разработчиков, потому что с ней никто раньше не сталкивался

🔴Пакет обновлялся в последний раз больше года назад, а это всегда риск остановки поддержки библиотеки и последующего рефакторинга приложения

Как быть?
Свести зависимость от чужих решений в проекте к минимуму. Особенно если речь идет о решении небольших задач, которые можно сделать самостоятельно.

В нашем примере можно убрать библиотеку для иконок и добавить ассеты в проект в том количестве, в котором они нужны именно в нем.

dependencies:
 flutter:
   sdk: flutter
 # Для получения данных о погоде
 http: ^1.2.2

flutter:
 assets:
   - assets/icons/

Итог: подстраиваем инструменты под приложение, а не создаем приложение под инструменты.

💬 Делитесь, какие паттерны в разработке на Flutter — личная боль?

🎙Провели время на CrossConf @crossconf максимально полезно.

В перерывах между докладами поймали Стаса Ильина, Lead Flutter developer и автора канала @frezycode. Поставили его перед сложным выбором — Flutter или Kotlin. Шутка… Все вопросы, конечно, были про Flutter. Ответы — в нашем ролике 🖱

#пакет_недели — Hugeicons. Коллекция из 4000+ иконок для мобильных приложений.

Главное о пакете Hugeicons
🔸Он предлагает иконки в разных стилях и вариантах. Например, rounded или sharp.

🔸Он позволяет изменять цвет и размер иконок, а также анимировать их.

🔸Он дает настраивать иконки по размеру и масштабировать их под любые экраны.

🔸 Он относительно легкий по весу. Это круто, потому что не перегружает приложение.

🔸Иконки загружаются и компилируются вместе с приложением. Это удобно для приложений, которые работают автономно.

Как использовать
Импортируем пакет и вызываем иконку с помощью виджета HugeIcon.

import 'package:hugeicons/hugeicons.dart';

HugeIcon(
  icon: HugeIcons.strokeRoundedHome01, // Выбор иконки
  color: Colors.red,                    // Цвет иконки
  size: 30.0,                           // Размер иконки
),
icon: 

HugeIcons.strokeRoundedHome01 — здесь указываем иконку, которая будет отображаться. У нас — дом с закругленными углами.

color: Colors.red задает цвет иконки. Наш дом будет красным.

size: 30.0 задает размер иконки в пикселях.

❗️Если у вас простой проект с минимальным набором иконок, Hugeincons может оказаться слишком массивным.

🔥Мне это нужно
🎨Рисую иконки в Paint с душой

Привет, это Екатерина, Flutter-разработчик в команде Friflex

Сегодня расскажу еще про один инструмент, который может принести больше проблем, чем пользы — shrinkWrap: true.

Если вы сталкивались с проблемой неограниченного размера ListView, то могли наткнуться на советы установить этот виджет. Это и правда решит проблему красного экрана:


@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
          children: [
            ListView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 10000,
              itemBuilder: (_, __) => const Text('Hello World!'),
            ),
          ],
        ),
      );

  }

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

Как сделать лучше?
Самый простой способ — использовать Expanded или Flexible.

@override
  Widget build(BuildContext context) {
    return Column(
        children: [
          Flexible(
            child: ListView.builder(
              itemCount: 10000,
              itemBuilder: (_, __) => const Text('Hello World!'),
            ),
          ),
        ],
      );

  }

❗️Если проблема возникла из-за использования ListView внутри другого ScrollView (к примеру, ListView внутри SingleChildScrollView), то поможет замена этих виджетов на CustomScrollView и SliverList.

💳Запускаем серию постов по созданию Flutter-приложения для оплаты через СБП без натива

Вспомним структуру. Обычная ссылка для оплаты отправляет пользователя на сайт СБП, где из нее формируется QR-код, который нужно сканировать. Это не очень удобно, потому что код нужно сканировать в приложении банка. После этого открывается окно оплаты и появляются данные о приемщике платежа.

Если мы возьмем поле schema из этой ссылки со списком банков и вставим его в ссылку оплаты вместо https, то получим диплинк, который сразу будет открывать приложение нужного банка.

Переходим к созданию приложения:

Шаг 1
Получаем список банков.

Шаг 2
Формируем список банков. Для этого достаточно трех полей: bankName, logoURL и schema.

Шаг 3
Вставляем эти поля в объект. Создаем список, в котором отображаются все банки на экране.

Шаг 4
Меняем в ссылках оплаты https на schema соответствующего банка и открываем через url_launcher.

Шаг 5
Прослушиваем жизненный цикл приложения с помощью AppLifecycleListener. Используем коллбек onRestart, в нем ставим флаг. Второй флаг ставим после перехода в приложение банка.

Шаг 6
После возвращения из приложения банка отправляем запрос на проверку статуса оплаты.

В проекте нам понадобится всего два пакета. В pubspec.yaml указываем:

dependencies: 
http: any 
url_launcher: any 

В следующих постах расскажем о каждом из шагов подобнее.

#пакет_недели — Patrol. Он помогает писать интеграционные тесты. Например, такие, которые требуют взаимодействия с настоящими устройствами или эмуляторами.

Главное о Patrol
🔴Он строится на основе flutter_test и integration_test.

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

🔴Его нужно использовать вместе с patrol_cli.

Как использовать
Две главные функции Patrol — нативная автоматизация и кастомный поиск. Здесь мы разберем только первую, а подробно про кастомный поиск можно почитать в документации.

Используем Patrol в тесте, который проверяет, как ведет себя приложение, когда взаимодействует с кнопками Home, Recent Apps и панелью уведомлений.

import 'package:example/main.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:patrol/patrol.dart';

void main() {
  patrolTest(
    'состояние счетчика сохраняется после перехода на домашний экран и возврата',
    ($) async {
      await $.pumpWidgetAndSettle(const MyApp());

      await $(FloatingActionButton).tap();
      expect($(#counterText).text, '1');

      await $.native.pressHome();
      await $.native.pressDoubleRecentApps();

      expect($(#counterText).text, '1');
      await $(FloatingActionButton).tap();
      expect($(#counterText).text, '2');

      await $.native.openNotifications();
      await $.native.pressBack();
    },
  );
}

patrolTest — обертка, которая заменяет стандартные тестовые функции Flutter. Внутри нее можно взаимодействовать и с виджетами Flutter, и с нативными элементами платформы.

$.native.pressHome() — эмулирует нажатие кнопки Home. Очень полезно, чтобы проверить, как ведет себя приложение, когда его сворачивают.

$.native.pressDoubleRecentApps() — имитирует двойное нажатие на кнопку списка последних приложений (Recent Apps). Можно использовать, чтобы проверить, как ведет себя приложение при возврате из других программ.

$.native.openNotifications() — эмулирует открытие панели уведомлений. Позволяет проверить, как приложение реагирует на системные события и взаимодействие с другими элементами ОС.

❤️ Это мне надо
🤷‍♂️ Нажму кнопки «Назад» и «Домой» руками

Создаем Flutter-приложение для оплаты через СБП

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

🔸Создаем объект для полей bankName, logoURL и schema. (Для безопасного парсинга данных рекомендуем использовать паттерн проектирования DTO):

```dart
class BankItem {
  const BankItem({
    required this.bankName,
    required this.logoURL,
    required this.schema,
  });

  final String bankName;
  final String logoURL;
  final String schema;

  static BankItem? fromJson(Map<String, dynamic> json) {
    final bankName = json['bankName'] as String?;
    final logoURL = json['logoURL'] as String?;
    final schema = json['schema'] as String?;

    if (bankName == null || logoURL == null || schema == null) {
      return null;
    }

    return BankItem(
      bankName: utf8.decode(bankName.codeUnits),
      logoURL: logoURL,
      schema: schema,
    );
  }
}
```
 

*Здесь используем utf8 из-за проблем с кодировкой. Если у банка нет схемы, имени или картинки, не считаем его валидным.

🔸Создаем абстрактный репозиторий SbpRepository для управления запросами СБП и реализуем метод getBankList в NewtorkSbpRepository, чтобы получить список банков-участников СБП:

class NewtorkSbpRepository implements SbpRepository {
  Future<Iterable<BankItem>> getBankList() async {
    try {
      final response = await http.get(
        Uri.parse('https://qr.nspk.ru/proxyapp/c2bmembers.json'),
      );
      final decodedMap = jsonDecode(response.body) as Map<String, dynamic>;
      final rawBanks = decodedMap['dictionary'] as List;

      final banks = rawBanks.map((e) => BankItem.fromJson(e)).whereNotNull();

      return banks;
    } catch (error, trace) {
      /// Добавить обработку особых ошибок
      rethrow;
    }
  }
}

Реализованный метод можно вызывать на любом этапе бизнес-логики, где нужно получить список банков.

Для управления состояниями можно использовать любой стейт-менеджер, который вам нравится (например flutter_bloc, riverpod).

Мы рассмотрим вариант без сторонних библиотек, используем FutureBuilder и InheritedWidget.

🔸Создаем экран для оплаты, который будет при инициализации запрашивать список банков из репозитория:

class SbpPayScreen extends StatefulWidget {
  const SbpPayScreen({super.key});

  @override
  State<SbpPayScreen> createState() => _SbpPayScreenState();
}

class _SbpPayScreenState extends State<SbpPayScreen> {
  late final Future<Iterable<BankItem>> bankList;

  @override
  void initState() {
    bankList = SbpController.of(context).repository.getBankList();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Оплата СБП'),
      ),
      body: FutureBuilder(
        future: bankList,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data!;
            return ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) => ListTile(
                title: Text(data.elementAt(index).bankName),
              ),
            );
          }
          if (snapshot.hasError) {
            return const Text('Произошла ошибка');
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

Как оперативно проверить приложение в AppStore?

Своим способом поделился Сергей, Team Lead Flutter-команды Friflex. Если нужно быстро выпустить обновление приложения (например, чтобы исправить критическую ошибку или добавить сборку с важным событием), можно воспользоваться процедурой срочной проверки.

Как действовать:

1️⃣ Выгрузите сборку приложения на ревью в App Store.

2️⃣ Отправьте запрос на срочную проверку. Для этого используйте форму по ссылке.

3️⃣ Дождитесь ответа. Обычно это занимает от 15 минут до 4 часов.

4️⃣ Радуйтесь одобрению.

P.S не балуемся этим способом слишком часто. Злоупотребление может привести к отказам в срочной проверке в будущем.

#пакет_недели — font_awesome_flutter. Это обертка для популярного набора иконок Font Awesome.

Главное о font_awesome_flutter
➡️Он меняет основные параметры иконок, такие как размер и цвет.
➡️Он применяет разные стили: solid, regular, light, и brands. В Pro версии стилей еще больше, включая duotone.
➡️Он поддерживает иконки брендов. Например, логотипы социальных сетей или известных компаний.

Как использовать
Добавляем зависимость и используем все стандартные иконки с помощью виджета Falcon:

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

IconButton(
  icon: FaIcon(FontAwesomeIcons.thumbsUp), // Иконка "пальцы вверх"
  onPressed: () {
    print("Liked!");
  },
),

Настраиваем иконки, задаем цвет и стили:

FaIcon(
  

FontAwesomeIcons.heart,  // Иконка "сердце"
  color: Colors.red,
  size: 50.0,
),

Можно исключить ненужные стили иконок из процесса генерации, чтобы уменьшить размер пакета:

$ ./configurator.sh --exclude solid
$ ./configurator.sh --exclude solid,brands

Иконки можно получить динамически по их имени — используйте faIconNameMapping.

import 'package:font_awesome_flutter/name_icon_mapping.dart';

...
    FaIcon(faIconNameMapping['solid abacus']);
...

🔥 Беру в работу
🤔 Слишком заморочено