Привет! На связи Анна, 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 не создает ненужные виджеты для каждого элемента.

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

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

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

Продаем мак и покупаем винду?

Привет, с вами опять Катя, Flutter Dev Friflex. Слышали уже, что Apple открыла исходный код Swift Build — нового мощного движка сборки? Говорят, скоро разработчики смогут собирать Flutter-приложения для iOS на Windows. Давайте разберемся, что такое Swift Build и как он повлияет на разработку кроссплатформенных приложений.

Что это такое
Swift Build — это инструмент, который упрощает процесс сборки приложений на Swift. Он позволяет разработчикам управлять зависимостями, компилировать код и настраивать различные параметры сборки. Открытие исходного кода Swift Build означает, что разработчики могут изучать, изменять и адаптировать его под свои нужды.

Основные возможности Swift Build
🔴Управление зависимостями: легкое добавление и обновление библиотек.

🔴Настройка сборки: гибкие настройки для различных конфигураций и платформ.

🔴Оптимизация сборки: ускорение процесса сборки за счет эффективного управления ресурсами.

Возможности, которые открывает Swift Build
🔴Сборка на Windows: если Swift Build станет доступным для Windows, разработчики смогут собирать iOS-приложения без Mac.

🔴Упрощение процесса разработки: это упростит рабочий процесс для разработчиков, которые предпочитают Windows, и снизит барьер для входа в разработку под iOS.

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

Реальность или мечта
Пока что сборка iOS-приложений на Windows остается скорее перспективой, чем реальностью. Несмотря на то, что Apple сделала Swift Build открытым, для полноценной сборки iOS-приложений все еще требуется Xcode, который доступен только на macOS.

Но сообщество активно обсуждает возможность адаптации Swift Build для работы на Windows, что может стать революцией в мире кроссплатформенной разработки.

🔥 — продаю мак
❤️ — люблю мак

Всем привет! Это Анна, Friflex Flutter Team Lead. Сегодня делюсь с вами своим личным топ-5 самых полезных расширений для VSCode.

🔜 Flutter Widget Snippets
Сниппеты в VSCode — очень удобный инструмент для быстрого создания шаблонных и часто повторяющихся участков кода. Это расширение позволяет быстро создать большинство самых популярных виджетов во Flutter (например, Stateless/StatefulWidget, Layout).

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

🔜 bloc
Для тех, кто в своих Flutter проектах использует библиотеку bloc, это расширение может стать незаменимым помощником.
Оно предоставляет набор сниппетов, с которыми в коде проще и быстрее добавлять виджеты в UI, создавать сами блоки и кубиты, а еще управлять их методами.

Расширение добавляет возможность быстро оборачивать виджеты в другие виджеты библиотеки через контекстное меню, а также создавать целые директории с первично настроенными связями между классами Bloc, State и Event. Находка для тех, кто не любит тратить время на организацию файлов и классов в них!

🔜 Flutter Tree
Еще одно полезное расширение для продвинутых Flutter-разработчиков.
С его помощью удобно добавлять вложенность виджетов: не теряешь время на написание параметров, расстановку скобок.

Например, если вам нужно создать контейнер со строкой виджетов внутри, это можно сделать простой записью Container>Row[Expanded>Text,ElevatedButton>Text]. В конце нажимаете Enter, и Flutter Tree все делает за вас — на выходе получаете сформированное дерево по вашему запросу.

🔜 Code Spell Checker
Это расширение пригодится не только Flutter-разработчикам, но и всем, кто пользуется VSCode. Оно помогает проверять написание слов в вашем коде. Будь то документация или название объектов в коде, расширение подчеркнет те слова, которые написаны некорректно и предложит варианты замены. Если слово написано верно, его можно вынести в исключения как для конкретного проекта, так и для вашего пользователя в общем. Поддерживает огромное количество языков, в том числе и русский.

🔜 Commit Message Editor
Почти все серьезные проекты требуют вести историю изменений в репозитории согласно соглашению о коммитах. Каждый коммит должен не только осмысленно отражать суть изменений, но и фиксировать тип изменений, измененные файлы и их критичность.

Чтобы оформлять коммиты по этим правилам, рекомендую Commit Message Editor. Расширение позволяет оформить коммит с помощью формы. Когда вы ее заполните, текст сам отформатируется и подставится в строку сообщения коммита.

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

В Flutter существует огромное количество виджетов для управления размерами. Давайте сделаем быстрый дайджест и пройдемся по некоторым из них. Поехали!

🔴FittedBox
— Автоматически подстраивает дочерний виджет под доступное пространство, сохраняя пропорции.  
— Если контент слишком большой, уменьшает его, чтобы всё поместилось.  

🔴OverflowBox
— Позволяет дочернему элементу выходить за пределы родительского контейнера.  
— Игнорирует ограничения родителя, давая больше свободы.  

🔴ConstrainedBox
— Задаёт минимальные или максимальные размеры для дочернего элемента.  
— Накладывает ограничения, даже если содержимое больше или меньше заданных параметров.  

🔴LimitedBox
— Ограничивает размеры элемента, но только если они не заданы явно.  
— Устанавливает максимальный размер, если дочерний элемент не ограничен другими условиями.  

🔴AspectRatio
— Сохраняет определённое соотношение сторон (например, 16:9).  
– Автоматически подстраивает размеры элемента, сохраняя пропорции.   

🔴UnconstrainedBox
— Убирает все ограничения по размеру для дочернего элемента.  
— Позволяет дочернему виджету занимать столько места, сколько ему нужно.  

🔴IntrinsicWidth / IntrinsicHeight
— Позволяет элементу занимать минимально возможное пространство.  
— Вычисляет минимальный размер, необходимый для отображения дочернего элемента.  

🔴Flex, Expanded и Flexible
— Адаптивно распределяет пространство в Row или Column.  
— Expanded — заполняет всё доступное пространство.  
— Flexible — занимает пространство по возможности, но не жёстко.  

🔴Align
— Позволяет расположить элемент внутри родителя (например, по центру или в углу).  
— Задает позицию элемента относительно родительского контейнера.  

🔴LayoutBuilder  
— Динамически определяет доступный размер и позволяет перестроить UI.  
— Полезно для адаптации интерфейса под разные размеры экранов.   

❗️Важно
Используйте эти виджеты с умом. Некоторые из них могут повлиять на производительность и рендеринг. Тестируйте каждый случай!

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

Привет, с вами Катя, Flutter Dev Friflex. 

Сегодня я расскажу о новом расширении в Visual Studio Code для Swift. 

🔴Цель обновления
Сделать возможной разработку Swift-приложений на всех платформах. Это позволит разработчикам создавать приложения на Swift без ограничений по операционной системе.

🔴О переходе
Для тех, кто уже использует VS Code, переход будет плавным. Все существующие функции и инструменты останутся доступными, что делает адаптацию к новым возможностям легкой и удобной. Старый релиз должен автоматически установить новое расширение и отключить себя, а в дальнейшем все языковые функции будут предоставляться новым расширением.

📎Ссылка на установку расширения.

Сегодня #Friflex_team заряжает знаниями на FlutterConf:

🔸12:40 — Юрий (руководитель отдела разработки) и Анна (Flutter TeamLead) в докладе «Router во Flutter. Когда думал, что все легко» расскажут про концепцию декларативного роутера.
📍Зал 1

🔸15:50 — Flutter-разработчики Роза и Екатерина в докладе «Как не наступать на одни и те же грабли: систематизация ошибок в разработке на Flutter» поделятся, как систематизировать ошибки, с которыми часто сталкиваются разработчики и предложат подходы по их минимизации.
📍Зал 2

Если вы здесь, то приходите послушать наши доклады и пообщаться. Присоединиться можно и онлайн.