🕊️Знакомьтесь, Flutter Observe @FlutterObserver_bot

Наш Tech Lead Юрий Петров создал Telegram-бота, который отслеживает репозитории Flutter и Dart и оперативно уведомляет о новых релизах и изменениях в ветке STABLE.

➡️Технические детали:
Бот написан на Dart, база данных: SQLite + Drift.

➡️Что дальше?
В планах — добавить дашборды активности репозиториев и возможность отслеживания пакетов на Pub.dev.

@FlutterObserver_bot, запомнили?

ARB-формат во всей красе

Привет, это Роза, Flutter Dev Friflex. В последнее время я много работаю с локализацией и заметила интересную вещь: ARB-файл часто недооценен. Сейчас расскажу, что это и как работает.

Что это
ARB (Application Resource Bundle) — это, по сути, файл JSON, улучшенный для локализации, с расширением .arb. Проще говоря, там хранятся переводы текста, которые вы видите в приложении. Помимо ключей и строк, ARB поддерживает:
🔴описания контекста
🔴примеры использования
🔴типы данных
🔴форматирование

Например:

{
  "@@locale": "ru",
  "topicTitle": "Arb-формат во всей красе",
  "@topicTitle": { 
    "description": "Заголовок для статьи про Arb-формат" 
    }
}

Здесь ключ topicTitle хранит строку, а под @topicTitle — метаданные. При помощи метадаты вы можете указывать для ключей локализации:
🔸context: пояснения для переводчиков и разработчиков
🔸type: указание типа строки или ее назначения
🔸comment: подсказки к строкам

Например:

{
  "welcome": "Добро пожаловать, {name}!",
  "@welcome": {
    "description": "Сообщение для приветствия",
    "context": "Для нового пользователя",
    "type": "Information",
    "comment": "Имя {name} нельзя переводить."
  }
}

Где используется
Во Flutter ARB-файлы тесно интегрированы с библиотекой intl, которая отвечает за локализацию.

Как это работает
1️⃣ Создаете отдельные ARB-файлы для всех языков, которые хотите поддерживать.
2️⃣ С помощью команды flutter gen-l10n генерируете Dart-код, который автоматически подтягивает правильные переводы для языка пользователя.
3️⃣ В коде просто обращаетесь к строкам по их ключам, а перевод подставляется автоматически.

❗️В реальных приложениях часто требуется использовать динамические значения внутри строк.

Например, вместо «Привет, Роза!» в строке может быть «Привет, {name}!»

Для этого в ARB-файлах применяются плейсхолдеры. О них я расскажу в следующем посте.

Привет! На связи Анна, Friflex Flutter Team Lead

Совсем недавно всеми известная библиотека bloc обновилась до версии 9.0.0. Вместе с ней критические изменения в мажорном обновлении получили:
🔴flutter_bloc (v9.0.0)
🔴hydrated_bloc (v10.0.0)
🔴bloc_test (v10.0.0)

Что эти обновления нам принесли и стоит ли обновляться в ближайшее время? Разберем по пунктам!

1️⃣ Минимальная версия Dart SDK поднята до 2.14.

2️⃣ Удален класс BlocOverrides. Этот объект был внедрен в библиотеку bloc в версии 8.0.0 и успешно работал на чистых Dart программах, но в приложениях на Flutter он вызывал много критичных ошибок.

Из-за этого создатели уже в версии bloc 8.1.0 пометили его как Deprecated и рекомендовали к замене на Bloc.observer и Bloc.transformer. Сейчас в версии 9.0.0 класс был удален полностью — самое время обновиться и избавиться от проблемного API 🙂

3️⃣ Представлен EmittableStateStreamableSoure. Новый интерфейс позволяет библиотеке bloc_test отвязаться от прямого использования реализаций BlocBase. Как результат — метод тестирования блоков blocTest больше не зависит от BlocBase.

4️⃣ Добавлена поддержка WASM. Отличная новость для тех, кто использует библиотеку hydrated_bloc и кому необходимо компилировать Flutter-приложения в WASM — обновление до версии 10.0.0 позволит это сделать!

5️⃣ Изменено поведение HydratedStorage.build(). В предыдущей версии библиотеки повторный вызов метода HydratedStorage.build() возвращал кэшированный экземпляр хранилища. Теперь проблема решена — каждый новый вызов будет создавать новый объект.

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

Подробнее ознакомиться с документацией по миграции можно здесь.

Привет, это Роза, Flutter Dev Friflex. Сегодня расскажу, как использовать ARB-файл для локализации на максимум. Что это такое и как работает, писала в этом посте.

Если вы занимаетесь локализацией приложений, то наверняка сталкивались с ситуациями, что в текстах встречаются динамические значения. Например, имя пользователя, дату или сумма денег. Чтобы не писать все это жестко в коде, в ARB-файле есть плейсхолдеры.

Что это такое
Плейсхолдеры — это метки, которые заменяются на реальные значения в runtime.

Что они содержат
🔴 description — описание, которое помогает разработчикам понять контекст строки и ее назначение
🔴 example — пример использования строки
🔴 type — тип данных: String, Object, int, double, num, DateTime

Некоторые типы позволяют настроить поведение еще точнее:
🔴Для чисел (num, int, double): параметры форматирования, такие как валюта, количество знаков после запятой
🔴Для дат (DateTime): поддержка форматов и кастомных шаблонов для отображения дат

Например:

"pageHomeBalance" : "Your balance is {amount} on {date}",
"@pageHomeBalance" : {
    "placeholders": {
        "amount": {
            "type": "double",
            "format": "currency",
            "example": "$1000.00",
            "description": "Account balance",
            "optionalParameters": {
                "decimalDigits": 2,
                "name": "USD",
                "symbol": "$",
                "customPattern": "¤#0.00"
            }
        },
        "date": {
            "type": "DateTime",
            "format": "yMd",
            "example": "11/10/2021",
            "description": "Balance date"
        }
    }
}

Здесь {amount} и {date} — плейсхолдеры, которые заменяются на реальные значения при отображении. Основные параметры плейсхолдеров — в таблице.

Виды плейсхолдеров
Виды плейсхолдеров:
1. Standard Placeholder (`{}`): для подстановок динамических значений.
2. Plural: изменяет текст в зависимости от количества объектов.
3. Select: выбирает строку в зависимости от кастомного параметра. Например, от времени суток.
4. Gender: изменяет текст в зависимости от пола

💬 Примечания
Указывайте other на случай неожиданных значений.
Plural, Select, Gender используют синтаксис ICU.

Если у вас есть свои лайфхаки или рекомендации по работе с ARB — делитесь ими в комментариях!

К нам едет ревизор, или как пройти проверку на защиту критических данных в приложении на Flutter

Анна, Flutter Team Lead Friflex, в этой статье разобрала 7 основных вещей, которые больше всего волнуют аудиторов.

🔸Можно ли запустить приложение в небезопасной среде — на root/jailbreak устройствах и на эмуляторах?
🔸Какие библиотеки внедряются в проект?
🔸В каком виде и где хранятся критические данные?
🔸Какие разрешения запрашивает приложение?
🔸Доступно ли превью страницы с чувствительными данными в фоновом режиме?
🔸Доступен ли запуск приложения, установленного из недоверенного источника?
🔸Актуальна ли версия Flutter?

Теперь вы на шаг ближе к прохождению аудита.

Привет, это Катя, Flutter Dev Friflex. Сегодня расскажу, как пользоваться режимом выбора виджетов (Select Widget Mode) из Flutter Inspector. А еще обсудим кнопку сброса выбранного виджета, о которой, как показала практика, не все знают.

Flutter Inspector — это инструмент, встроенный в Flutter DevTools, который позволяет разработчикам анализировать и отлаживать пользовательский интерфейс. С его помощью можно:
🔴видеть иерархию виджетов
🔴проверять размеры и отступы
🔴изменять свойства виджетов в реальном времени

Что такое Select Widget Mode?
Select Widget Mode (SWM) — это режим, который позволяет вам выбирать виджеты в вашем приложении, чтобы увидеть их свойства и структуру.

Чтобы активировать этот режим:
1️⃣ Запустите ваше приложение
2️⃣ Откройте DevTools
3️⃣ Выберите вкладку Flutter Inspector
4️⃣ Нажмите на кнопку «Select Widget Mode» (в левом верхнем углу)

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

Пример исправления отступов:
Объявляю контейнер с паддингом 20 со всех сторон:

Container(
 Text:  padding: EdgeInsets.all(20.0),
  child: Text('Привет, Flutter Friendly!'),
) 

Мне нужно убрать вертикальный паддинг и посмотреть, как это будет выглядеть. Для этого использую SWM, выбираю контейнер и изменяю отступ в реальном времени на:

EdgeInsets.symmetric(horizontal: 20.0)

Важно: многие не знают о кнопке сброса, которая находится в левом нижнем углу приложения. Она появляется после первого нажатия на любой виджет в SWM. С ее помощью не нужно каждый раз перезапускать приложение, чтобы выбрать другой элемент на экране.

Документацию по DevTools можно посмотреть здесь

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

Плейлист будем дополнять, Делитесь в комментариях, под какие мелодии вам работается лучше всего.

Привет, это Роза, Flutter Dev Friflex👋

Сегодня расскажу о пакете meta, который помогает сделать Dart-код более понятным, поддерживаемым и безопасным.

Что такое пакет meta

Пакет meta — это библиотека от команды Dart, которая предоставляет аннотации для добавления метаданных в ваш код. Эти аннотации:

🖱 Документируют код: помогают понять, как правильно использовать функции, классы или переменные
🖱 Подсвечивают ошибки: инструменты анализа, такие как dart analyze, используют аннотации для поиска проблем в коде
🖱 Улучшают читаемость: делают код понятнее для команды и проще в сопровождении

Основные аннотации пакета meta

🔴@immutable — указывает, что класс неизменяемый и все его поля должны быть final
🔴@protected — говорит, что метод или поле предназначено только для использования внутри класса или его подклассов
🔴@visibleForTesting — Помечает метод или поле как доступное только для тестов.
🔴@sealed — отмечает, что класс нельзя наследовать за пределами этого файла
🔴@mustCallSuper — обязывает вызывать метод суперкласса при переопределении

Расширенные аннотации пакета meta

🔴@experimental — помечает элемент как экспериментальный и подверженный изменениям
🔴@UseResult — указывает, что результат функции или метода должен быть использован
🔴@alwaysThrows — заставляет метод всегда выбрасывать исключение
🔴@doNotStore — значение не должно сохраняться или кэшироваться
🔴@internal — говорит, что элемент предназначен для внутреннего использования и не является частью публичного API

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

import 'package:meta/meta.dart';

@immutable
class User {
  final String name;
  final int age;

  const User(this.name, this.age);
}

Достаточно добавить аннотацию перед объявлением класса, метода или поля, чтобы она начала работать.

Если хотите узнать больше, загляните в документацию пакета.

Используйте аннотации из meta, чтобы писать качественный и профессиональный код. А если есть вопросы или предложения, пишите в комментариях. Обсудим 🚀

Привет, снова с вами Катя, Flutter Dev Friflex. Сегодня расскажу про бета-версию Android 16.

Контекст такой: Google запустила публичное тестирование Android 16, и теперь пользователи могут установить бета-версию через OTA-обновление.

Что нового в Android 16 Beta 1

🔴Live Updates. Новый тип уведомлений, созданный для отображения статуса текущих событий. Это аналог Live Activities в iOS. С помощью Live Updates можно в реальном времени отслеживать процесс доставки заказа или следующий поворот, не открывая приложение ресторана или навигатора.

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

🔴Обновления предиктивного жеста «Назад». Теперь поведение жеста возврата на предыдущий экран поддерживает и трехкнопочную навигацию. Удерживая кнопку «Назад», можно увидеть фрагмент предыдущего экрана.

🔴Совместимость с кодеком APV. Кодек Advanced Professional Video, разработанный Samsung, предназначен для записи и постобработки видео высокого качества.

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

📌Интересный факт: все экраны придется адаптировать под ландшафт, так как установка в портретной ориентации будет невозможна. Почему так? Смотрите здесь.

С какими устройствами совместима

С Android 16 Beta 1 совместимы смартфоны и планшеты серии Google Pixel: Pixel 6 и 6 Pro, Pixel 6a, Pixel 7 и 7 Pro, Pixel 7a, Pixel Fold, Pixel Tablet, Pixel 8 и 8 Pro, Pixel 8a, Pixel 9, 9 Pro, 9 Pro XL и 9 Pro Fold.

Как установить, и когда выйдет

Самый простой способ установки — зарегистрироваться в программе бета-тестирования. После установки бета-версии Android 16 вернуться к стабильной версии без сброса данных можно будет только после окончательного релиза Android 16. Говорят, стабильная версия выйдет в апреле-июне.

Подробнее читайте здесь.

🔥 — иду тестировать
☕️ — подожду стабильный релиз

Привет! Это Анна, Friflex Flutter Team Lead. Сегодня расскажу о переменных окружения: как удобно и безопасно настроить их хранение и использование во Flutter-проектах.

Для разработки приложений стандартно создаются 2-3 основных окружения. В разных командах названия у них могут немного отличаться, но суть всегда одна:

🔴production — пользовательское окружение, берет реальные данные с бэкенда, в таком виде приложение попадет в сторы
🔴staging — окружение для тестирования взаимодействия с бэкендом, дает тестовые серверные данные и позволяет имитировать разные пользовательские сценарии
🔴development — окружение для внутренних процессов разработки, может управлять внутренними моковыми данными для тестирования логики работы приложения

В проектах с несколькими окружениями часто нужно подменять те или иные переменные динамически между prod, stage и dev. Именно для этого есть переменные оружения, которые стандартно хранятся в .env файлах.

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

❗️Файлы .env необходимо добавлять в .gitignore и никогда не загружать в репозитории.

env 
|_ prod.env
|_ stage.env
|_ dev.env

В каждый из файлов необходимо добавить те данные, которые в проекте должны подменяться от окружения к окружению. У нас это будет baseUrl для запросов на сервер и ключ API для доступа к AppMetrica.

requestBaseUrl='https://base-url.ru/'
appMetricaApiKey='your_api_key'

Чтобы приложение могло использовать эти переменные, подключим библиотеку envied. Она не только даст доступ к данным переменных, но и поможет зашифровать их, хранить в формате неочевидных наборов целых чисел.

Такая безопасность — главное преимущество этого пакета: данные переменных не будут использоваться в приложении в явном виде. Это значит, что при реверс-инжиниринге и прочих механизмах извлечения данных программного кода получить к ним доступ будет значительно сложнее.

Чтобы приложение получило доступ к переменным создадим интерфейс конфигурации

abstract interface class AppConfigInterface {
  abstract final String requestBaseUrl;
  abstract final String appMetricaApiKey;
}

Для каждого из окружений добавим реализацию интерфейса конфигурации с аннотацией класса @Envied(). Аннотация требует пути к файлу, откуда будут извлечены переменные окружения.

Поля внутри класса помечаются аннотацией @EnviedField() — сюда можно передать параметры названия переменной, значения по умолчанию, необходимости офусцировать данные и другие данные.

@Envied(name: 'Prod', path: 'env/prod.env')
class AppConfigProd implements AppConfigInterface {
  @override
  @EnviedField(obfuscate: true)
  String get appMetricaApiKey => _AppConfigProd.appMetricaApiKey;

  @override
  @EnviedField(obfuscate: true)
  String get requestBaseUrl => _AppConfigProd.requestBaseUrl;
}

После запуска кодогенерации объекты с аннотацией получают свои значения из указанного по пути файла .env. Зашифрованные значения в приложении хранятся в файле app_config.g.dart.

Готово! Теперь вы можете внедрить объект конфигурации в DI приложения и безопасно использовать переменные окружения!

Привет! Это Роза, Flutter Dev Friflex👋

Почти в каждом Flutter-приложении есть скроллящиеся списки. Если использовать их неправильно, могут возникнуть проблемы с производительностью. Сегодня расскажу, как сделать скролл плавным и эффективным. Начнем!

📌 Заменяй вложенные ListView и Column на CustomScrollView
Если у тебя сложная вложенная структура, CustomScrollView поможет избежать избыточных перестроений и повысит эффективность.

📌 Выбирай ListView.builder для длинных списков
В отличие от ListView, который создает все элементы сразу, ListView.builder рендерит только видимые элементы, что экономит память и ресурсы.

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

📌 Оптимизируй ListView с itemExtent или SliverFixedExtentList
Фиксированная высота элементов снижает нагрузку на систему прокрутки и делает ее более плавной.

📌 Избегай shrinkWrap в длинных списках
Он пересчитывает размеры всех элементов, что может замедлить рендеринг. Подробнее — в этом посте.

📌 Применяй NestedScrollView для SliverAppBar и TabBarView
Это позволит заголовку сворачиваться плавно и без рывков.

📌 Выбирай ReorderableListView вместо ListView для перетаскивания элементов
Он уже оптимизирован под такие сценарии и не требует сложной ручной обработки состояний.

📌 Добавляй AutomaticKeepAliveClientMixin для сохранения состояния элементов
Если в списке есть сложные элементы добавляй AutomaticKeepAliveClientMixin, чтобы Flutter не пересоздавал виджеты при прокрутке.

📌 Используй к ScrollablePositionedList для быстрой прокрутки к нужному элементу
Если нужно быстро прокручивать к определенному элементу, ScrollablePositionedList эффективнее, чем стандартный ListView.

📌 Пробуй ListView.separated вместо дополнительных Padding и Divider
Этот вариант более производительный, так как Flutter не создает ненужные виджеты для каждого элемента.

📌 Реализуй пагинацию для длинных списков
Если в твоем приложении большой список данных, загружай их по частям. Это снижает нагрузку на память и повышает производительность.

❗️Все эти советы зависят от контекста. Важно тестировать каждый случай.

А какие еще лайфхаки по прокрутке ты используешь? Пиши в комментариях!