Flutter Friendly

🗣️Привет, это Катя, Flutter Dev Friflex

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

📌 Подробнее о семантике во Flutter можно прочитать в официальной документации

🧠 Что такое Semantic Role?
Это описание назначения виджета, помогающее вспомогательным технологиям понять, как этот элемент должен «звучать» для пользователя. Flutter сам добавляет нужные роли в стандартные виджеты (например, TabBar, MenuAnchor, Table). Но если вы используете кастомный компонент — семантика может быть утеряна.

Например, если вы делаете список с кастомной реализацией, не забудьте явно указать SemanticsRole.list и SemanticsRole.listItem:



Semantics(
  role: SemanticsRole.list,
  explicitChildNodes: true,
  child: Column(
    children: [
      Semantics(
        role: SemanticsRole.listItem,
        child: Text('Первый элемент списка'),
      ),
      Semantics(
        role: SemanticsRole.listItem,
        child: Text('Второй элемент списка'),
      ),
    ],
  ),
)




🧪 Как тестировать доступность?
Flutter предлагает встроенные Guideline API.
Они проверяют:
✔️Размеры кликабельных областей (48x48 на Android, 44x44 на iOS)
✔️Контраст текста
✔️Наличие меток на интерактивных элементах

Такие тесты можно запускать параллельно с другими widget-тестами, например, в test/a11y_test.dart.

🌐 Доступность на Web
Для отладки доступности веб-приложений можно включить визуализацию семантических узлов:

flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true


Вы увидите, как Flutter отрисовывает семантические элементы поверх виджетов. Это позволяет проверить корректность разметки.

✅ Чеклист перед релизом
Перед выпуском убедитесь, что:
▫️Все интерактивные элементы работают и дают понятный фидбэк
▫️Экранный диктор читает все элементы (проверьте с TalkBack и VoiceOver)
▫️Контраст текста достаточный (не менее 4.5:1)
▫️Ничто не меняет контекст пользователя внезапно (например, не переходит на новый экран во время ввода)
▫️Размер кликабельных элементов — минимум 48x48
▫️Ошибки отображаются понятно и даются способы их исправить
▫️Интерфейс остается читаемым при масштабировании и в режимах для дальтоников

💚Доступность — это не только забота о людях с особыми потребностями, но и шаг к созданию действительно качественного продукта. Делайте интерфейсы удобными для всех, и вы точно не прогадаете.

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

Если вы пишете тесты во Flutter, то наверняка сталкивались с тем, как сложно тестировать асинхронные операции. Часто такие операции приходится мокать или обходить с помощью Future.delayed. Но что делать, если в коде используются не только отложенные Future, но и настоящие таймеры, задержки и другие механизмы, зависящие от времени?

Сегодня поговорим о пакете fake_async, который может помочь с этим делом.

Пакет fake_async создан для тестирования кода, зависящего от времени. Flutter-тесты могут запускаться в специальной зоне FakeAsync, где вы управляете временем вручную. То есть  fake_async перехватывает все стандартные Dart-таймеры и заменяет их на свои «поддельные». Благодаря этому вы можете контролировать время в тестах, не дожидаясь реальных секунд или минут.

Например,  у вас есть функция, которая загружает данные с задержкой:

Future<String> fetchData() {
  return Future.delayed(Duration(seconds: 2), () => 'Data loaded');
}

Без fake_async тестирование этой функции потребовало бы реальной 2-секундной задержки.

Попробуем заменить на fake_async.

import 'package:fake_async/fake_async.dart';
import 'package:test/test.dart';

void main() {
  test('fetchData должен вернуть "Data loaded" через 2 секунды', () {
    fakeAsync((async) { // 1. Оборачиваем тест в fakeAsync()
      final future = fetchData();

      async.elapse(Duration(seconds: 2)); // 2. Перемещаем виртуальное время на 2 секунды

      expect(future, completion('Data loaded')); // 3. Немедленно проверяем результат
    });
  });
}

fakeAsync() создает виртуальное время, которым можно управлять вручную через elapse(). Это позволяет имитировать прохождение времени и тут же проверять результат асинхронных операций — без реальных пауз.

Также  у fake_async есть другие полезные методы:
▪️ flushTimers() — для мгновенного выполнения всех запланированных таймеров
▪️ advanceTime(Duration duration) — похож на elapse, но иногда дает чуть более тонкий контроль

Хотя fake_async очень полезен, у него есть свои особенности, которые важно учитывать:
✅ каждый вызов fakeAsync(...) создает свою виртуальную временную зону, полностью изолированную от других
✅ он не управляет async/await напрямую, только таймерами и микрозадачами
✅ может конфликтовать с tester.runAsync в flutter_test
✅elapse() не влияет на scheduleMicrotask — только на макрозадачи
✅ потоки типа Stream.periodic могут вести себя нестабильно
✅ в flutter_test возможны конфликты с фреймами и анимациями

❤️ — если было полезно

Привет! Это Анна, Friflex Flutter Team Lead👋

Наверняка, самым частоиспользуемым Flutter-разработчиками методом можно назвать метод build() в Stateful- и Stateless-виджетах. Сегодня поделюсь с вами своим топ-5 лучших практик для его оптимизации.

1. Использовать константные конструкторы везде, где можно.
При перестроении родительского виджета все дочерние виджеты, созданные как константные, перестраиваться не будут. С помощью const вы даете программе явно понять, что именно этот объект изменяться не должен.

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('Example text'), // оптимально
        Text('Example text not const'), // можно оптимизировать, добавив const
      ],
    );
  }
}

2. Кэшировать обращения к MediaQuery.of(context) и Theme.of(context)
Каждое обращение у этих классов к методам of(context) под капотом подразумевает вызов dependOnInheritedWidgetOfExactType(). Этот метод производит поиск необходимых данных по всему дереву виджетов. Такая операция занимает некоторое время. Если таких операций было запущено несколько, то время увеличивается.

Кроме этого, если от MediaQuery вам необходим, например, только размер экрана, лучше вместо стандартного of(context) использовать sizeOf(context).

/// Пример неоптимизированного использования
class NotOptimizedExample extends StatelessWidget {
  const NotOptimizedExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.8,
      height: MediaQuery.of(context).size.height * 0.3,
      margin: EdgeInsets.all(MediaQuery.of(context).size.width * 0.05),
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        border: Border.all(color: Theme.of(context).dividerColor),
      ),
      child: const Text('Hello'),
    );
  }
}

/// Пример оптимизированного использования
class OptimizedExample extends StatelessWidget {
  const OptimizedExample({super.key});

  @override
  Widget build(BuildContext context) {
    final sizeData = MediaQuery.sizeOf(context);
    final themeData = Theme.of(context);

    return Container(
      width: sizeData.width * 0.8,
      height: sizeData.height * 0.3,
      margin: EdgeInsets.all(sizeData.width * 0.05),
      decoration: BoxDecoration(
        color: themeData.primaryColor,
        border: Border.all(color: themeData.dividerColor),
      ),
      child: const Text('Hello'),
    );
  }
}

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

class _NotOptimizedExampleState extends State<NotOptimizedExample> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        PageHeader(), // Пересоздается
        CounterView(),
        CounterButton(
          onTap: () => setState(() {
            counter++;
          }),
        ),
        PageFooter(), // Пересоздается
      ],
    );
  }
}

В этом случае при тапе на кнопку нам нужно обновить только CounterView. Но подобной реализацией мы заставляем перерисовать все содержимое экрана.
Оптимальное решение здесь — ребилдить только CounterView.

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

Пятый способ — в комментариях👇

📍Привет, это Катя, Friflex Flutter Dev

Сегодня я расскажу о том, как Git помогает в повседневной работе с Flutter-проектами, какие встроенные инструменты есть в Android Studio и VS Code для работы с ним и как они делают жизнь разработчика чуть проще.

Зачем разработчикам нужен Git?
Все проекты — это, как правило, разные приложения, где часто работают несколько разработчиков, дизайнеров и тестировщиков. Git помогает:

✔️Хранить историю изменений проекта
✔️Безопасно тестировать фичи в отдельных ветках
✔️Устранять баги, не трогая основную логику
✔️Организовать code review- и pull request-процессы

Даже если вы работаете одни — все равно используйте Git. Это как страховка: можно всегда откатиться к стабильной версии, сравнить изменения или понять, когда что-то «сломалось».

Прописываете типовой флоу Git в Flutter-проекте:

git checkout -b feature/new-cool-widget
# Работаешь, коммитишь
git add .
git commit -m "Добавил новый виджет для экрана авторизации"
git push origin feature/new-cool-widget

Затем открываете pull request в GitHub или GitLab, проходите ревью, мержите — и вуаля!

Git + Android Studio
Android Studio (или IntelliJ) предоставляет шикарный визуальный интерфейс для работы с Git:

Встроенные фичи:
▫️Commit panel: показывает изменения, можно выбрать, что включить в коммит
▫️Version control tab: история изменений, лог коммитов, сравнение файлов
▫️Interactive rebase, cherry-pick и squash — всё доступно из GUI
▫️Branch manager: быстрое переключение, создание и удаление веток

Лайфхак: ⌘ + K (macOS) или Ctrl + K (Windows/Linux) — быстрое окно коммита

Git + VS Code
VS Code тоже хорош для Git, особенно если вы фанат клавиатуры и расширений.

Основные фичи:
▫️Панель Source Control (обычно слева)
▫️Быстрое создание веток, коммитов, пушей и пулов
▫️Интеграция с GitHub: можно прямо в редакторе открывать pull requests

Полезные расширения:
▫️GitLens — суперподробная история изменений
▫️Git Graph — визуализация веток
▫️GitHub Pull Requests — ревью прямо из редактора

Лайфхак: Cmd + Shift + P → Git: Commit — и вуаля, можно коммитить без мышки

Git ignore в Flutter

gitignore
# Flutter
.dart_tool/
.packages
.pub/
build/
ios/Pods/
android/.gradle/

Обязательно добавьте .gitignore в корень проекта, чтобы не заливать временные файлы, кэш и сборочные артефакты.

Советы из практики
▪️Названия веток лучше делать по шаблону: feature/, bugfix/, hotfix/, refactor/
▪️Используйте rebase осторожно, а лучше не используйте, если знаете, о чем я
▪️Часто пушьте — особенно в командной работе
▪️Никогда не коммитьте pubspec.lock в библиотеку, но обязательно — в приложение

Используйте встроенные возможности среды разработки, а не пишите все вручную👍

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

Сегодня немного о том, как улучшить UI-опыт в ваших Flutter web-приложениях.

Порой даже в самом продуманном интерфейсе нужны подсказки.  
Допустим, у вас есть кнопка: иконка вроде есть, но… что она делает? Чтобы закрыть такие «дыры» в UX во Flutter есть такой виджет как Tooltip. Вроде мелочь, но при помощи одной лишь строчки вы заметно улучшите опыт пользователя.

Tooltip — это всплывающая подсказка, которая появляется:
✔️ при долгом тапе на мобильных устройствах
✔️при наведении курсора в вебе и на десктопе

Например, это может быть  полезно:
▫️ для иконок без текста
▫️ для кнопок с непонятным назначением

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

Положение, задержка и продолжительность отображения настраиваются через waitDuration, showDuration и другие параметры.

Базовое использование:

Tooltip(
  message: 'Добавить',
  child: Icon(Icons.add),
)

Но на этом не все, вы также можете его кастомизировать: задать фон, стили, задержки и даже использовать rich-контент.

    Tooltip(
  decoration: BoxDecoration(
    color: Theme.of(context).colorScheme.surface,
  ),
  richMessage: WidgetSpan(
    alignment: PlaceholderAlignment.baseline,
    baseline: TextBaseline.alphabetic,
    child: Padding(
      padding: const EdgeInsets.all(4.0),
      child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: maxWidth),
        child: Text(
          message,
          style: Theme.of(context).textTheme.bodySmall,
        ),
      ),
    ),
  ),
  child: const InfoIcon(isOutline: true, size: 20),
);

Некоторые виджеты уже встроенно поддерживают тултипы. Например, IconButton.

IconButton(
  icon: Icon(Icons.search),
  tooltip: 'Поиск',
  onPressed: () {},
)

❕При использовании tooltip не стоит перебарщивать. Добавляйте подсказки только в те места, где это действительно необходимо! Не надо дублировать то, что и так ясно.

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

Если было полезно — ❤️

👋Всем привет! С вами Анна, Friflex Flutter Team Lead.

Однажды Роза в своем посте уже делилась лайфхаками, как сделать скролящиеся списки красивыми, плавными и высокопроизводительными. Там же упоминались три основных виджета для реализации списков с прокруткой — SingleChildScrollView, ListView и CustomScrollView. Сегодня чуть глубже погрузимся в специфику работы каждого из них.

✔️SingleChildScrollView — самый простой виджет для прокрутки. Принимает в качестве «ребенка» только один виджет, поэтому при необходимости вложить несколько объектов необходимо обернуть их в Column.



SingleChildScrollView(
  child: Column(
    children: [
      Child1()
      Child2()
      Child3()
    ],
  ),
)



Плюсы:
▪️максимально прост в использовании
▪️ отлично подходит для отрисовки статичных объектов

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

✔️ListView — наиболее часто используемый виджет для скроллящихся списков. Имеет несколько конструкторов builder, separated и custom, каждый из которых в разных ситуациях может помочь максимально сократить количество кода.



ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Child();
},
)

ListView(
children: [
Child1(),
Child2(),
],
)



Плюсы:
▪️ поддерживает высокую производительность
▪️ работает по принципу ленивой загрузки (вложенные виджеты билдятся не одновременно, а по мере прокрутки)

Минусы:
➖ позволяет вложить простой контент
➖ не дает сильно кастомизировать прокрутку

✔️CustomScrollView — идеальное решение для сложных интерфейсов. Работает не на стандартных виджетах, а на сливерах, что без проблем позволяет вкладывать разнообразный контент.



CustomScrollView(
slivers: [
SliverAppBar(
title: Child1(),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Child2(),
childCount: 20,
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
delegate: SliverChildBuilderDelegate(
(context, index) => Child3(),
childCount: 10,
),
),
],
)



Плюсы:
▪️ обеспечивает высокую производительность даже при сложном и разнообразном наполнении
▪️ поддерживает наибольшую возможность кастомизации
▪️ дает возможность добавлять дополнительные интересные эффекты в прокрутку
▪️ поддерживает ленивую загрузку контента

Минусы:
➖ имеет нестандартную для других виджетов скроллящихся списков механику, что требует от разработчика дополнительного изучения
➖ работает на сливерах, что так же может вызывать трудности у начинающих специалистов

Каждый из вариантов имеет место быть. Например, для простого короткого списка статичных контейнеров нет смысла создавать CustomScrollView, так как с этой целью прекрасно справится SingleChildScrollView. А при необходимости добавить на экран несколько сеток и вложенных списков со сложной анимацией оптимальным будет именно CustomScrollView. Здесь важно понимать различия и с умом подходить к выбору инструмента.

Привет, это снова Катя, Flutter Dev Friflex!💫

Иногда одной только документации (README) на pub.dev недостаточно — особенно, когда библиотека ведет себя странно или хочется понять, как она работает «под капотом». В такие моменты приходится читать исходный код библиотеки. Давайте разберем, куда смотреть и на что можно не тратить время, на примере популярной библиотеки intl_utils.

Шаг 1. Открываем репозиторий

1️⃣Идем на pub.dev
2️⃣В поиске вводим нужную библиотеку, например, intl_utils
3️⃣В карточке справа жмем Repository (GitHub) — нас перебросит на GitHub-репозиторий проекта

Шаг 2. Что стоит смотреть

▪️Папка bin/
Часто используется для CLI-скриптов. В intl_utils, например, есть исполняемый файл генератора локализаций. Он как раз запускается при выполнении команды dart run intl_utils:generate

▪️Папка lib/
Это сердце библиотеки. Тут обычно:
✔️логика импорта (intl_utils.dart)
✔️основной код библиотеки
✔️вспомогательные утилиты

▪️Файл генератора
Если есть генерация кода, как у intl_utils, стоит посмотреть, как он парсит pubspec.yaml, обрабатывает ключи и какие шаблоны использует. В intl_utils, например:
✔️generator.dart отвечает за запуск логики
✔️pubspec_config.dart — за чтение конфигурации
✔️templates/ — за шаблоны, по которым создаются dart-файлы с переводам

Иногда полезно заглянуть в build.yaml — он описывает, как работает генерация с build_runner.

Шаг 3. Что можно пропустить

❌ Тесты
Если вы просто хотите понять, как работает логика, тесты можно пропустить. Но если вы хотите проверить, что библиотека работает корректно, заглянуть все-таки стоит.

❌ Конфигурационные файлы
gitignore, analysis_options.yaml, metadata, vscode/ и прочие технические файлы не помогают в понимании логики работы.

Советы

✅ Начинайте с точки входа — файла, указанного в pubspec.yaml → executables: или lib/
✅ Ищите ключевые слова: generate, parse, template, config. Они помогут быстрее найти нужную часть
✅ Если запутались — зайдите в example/, если он есть. Там обычно видно, как библиотеку используют в реальном коде.

Часто ли вы читаете сторонние библиотеки?

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

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

Конечно, можно использовать готовые решения — например, PopupMenuButton с кастомным PopupMenuEntry или диалог. Но если вам нужно больше контроля над позиционированием и поведением окна, лучше реализовать его вручную.

Для этого используем три компонента:
1️⃣ Overlay — для отрисовки поверх текущего интерфейса
2️⃣ CompositedTransformTarget — якорь для привязки
3️⃣ CompositedTransformFollower — виджет, который будет следовать за якорем

Немного теории
Overlay — специальный стек, поверх которого можно отрисовывать виджеты вне основного дерева. Элементы добавляются в Overlay через OverlayEntry.

Чтобы связать два виджета в пространстве, используем:
✔️ CompositedTransformTarget — задает якорь
✔️ CompositedTransformFollower — следует за якорем, даже если его позиция меняется

CompositedTransformTarget(
  link: _layerLink,
  child: ..., // ваш виджет
)

CompositedTransformFollower(
  link: _layerLink, 
  offset: Offset.zero,
  targetAnchor: Alignment.bottomLeft,
  followerAnchor: Alignment.topLeft,
  child: ..., // всплывающее окно
)

Где:
🔵 link — объект LayerLink, соединяющий Target и Follower
🔵 showWhenUnlinked — показывает Follower, если связь потеряна
🔵 offset — смещение относительно якоря
🔵 targetAnchor и followerAnchor — точки привязки

Реализация
Для начала создадим StatefulWidget для управления окном. В State определим:
➡️ LayerLink — для связи кнопки и окна
➡️ OverlayEntry — элемент, который добавим в Overlay
➡️ OverlayState — текущий Overlay из контекста

    final LayerLink _layerLink = LayerLink();
OverlayEntry? _overlayEntry;
OverlayState? _overlayState;

В методе build оборачиваем кнопку в CompositedTransformTarget:

@override
Widget build(BuildContext context) {
  return CompositedTransformTarget(
    link: _layerLink,
    child: LocalizationFilledIconButton(
      icon: widget.icon ?? const FilterIcon(),
      onPressed: _toggleDialog,
    ),
  );
}

Добавим логику открытия/закрытия:

void _toggleDialog() {
  // Если оверлей ещё не создан – создаем его
  if (_overlayEntry == null) {
    _overlayEntry = _createOverlayEntry(); // Создаём OverlayEntry
    _overlayState = Overlay.of(context);   // Получаем текущее состояние Overlay
    _overlayState?.insert(_overlayEntry!); // Вставляем OverlayEntry в Overlay
  } else {
    // Если оверлей уже открыт – удаляем его
    _overlayEntry?.remove(); // Удаляем OverlayEntry из Overlay
    _overlayEntry = null;    // Обнуляем ссылку на OverlayEntry
  }
}

Создаем само окно через CompositedTransformFollower:

OverlayEntry _createOverlayEntry() {
  return OverlayEntry(
    builder: (context) {
      return GestureDetector(
        behavior: HitTestBehavior.translucent, // Позволяет "ловить" тап вне окна
        onTap: _toggleDialog, // Закрываем окно при тапе вне его области
        child: Stack(
          children: [
            Positioned(
              width: MediaQuery.sizeOf(context).width / 3, // Ширина окна – треть экрана
              child: CompositedTransformFollower(
                link: _layerLink, // Связь с CompositedTransformTarget
                showWhenUnlinked: false, // Скрываем окно, если связь потеряна
                targetAnchor: Alignment.bottomLeft, // Привязываемся к нижнему левому углу кнопки
                child: FilterDialog(toggleDialog: _toggleDialog), // Само окно фильтра
              ),
            ),
          ],
        ),
      );
    },
  );
}

Не забываем удалить OverlayEntry при закрытии:

@override
void dispose() {
  _overlayEntry?.remove();
  super.dispose();
}

Готово!
Теперь у нас есть кастомное окно с фильтрами, которое:
✔️ Открывается по нажатию на кнопку
✔️ Позиционируется рядом с ней
✔️ Закрывается при клике вне области

❤️ — если было полезно

Всем привет! С вами Анна, Friflex Flutter Team Lead💬

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

WidgetsBindingObserver — это миксин, который дает возможность объекту, к которому подключается, отслеживать изменения системы и жизненного цикла приложения.

Подключить его очень просто. Для примера создадим Stateful-виджет Example. К состоянию этого виджета нужно подключить миксин, затем в initState() необходимо обратиться к экземпляру WidgetsBinding и подключить текущий виджет как наблюдателя. При этом важно в методе dispose() отсоединять наблюдателя. Подобная реализация state-виджета Example будет выглядеть следующим образом:



class _ExampleState extends State<Example> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

Что же дает нам такая реализация? WidgetsBindingObserver позволяет отслеживать:

✔️Жизненный цикл приложения (активно, работает в фоне и другие параметры)

 @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    print('Жизненный цикл приложения изменился: $state');
  }

✔️ Изменения размеров приложения (например, при перевороте экрана)

 @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final size = View.of(context).physicalSize;
    print('Размер экрана изменился: ${size.width}x${size.height}');
  }

✔️ Изменения темы системы

 @override
  void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    print('Изменилась тема системы');
  }

✔️Изменения системной локализации

  @override
  void didChangeLocales(List<Locale>? locales) {
    super.didChangeLocales(locales);
    print(
        'Изменилась локализация: ${locales?.map((locale) => locale.toString()).join(', ')}');
  }

✔️ Возникновения нехватки памяти в системе

@override
  void didHaveMemoryPressure() {
    super.didHaveMemoryPressure();
    print('Обнаружена нехватка памяти!');
  }



✔️Изменения системного размера шрифта



  @override
  void didChangeTextScaleFactor() {
    super.didChangeTextScaleFactor();
    print('Изменился размер шрифта системы');
  }



📎Еще больше возможностей WidgetsBindingObserver можно найти в документации

❤️ — если было полезно

💭Привет, это снова Катя, Flutter Dev Friflex!

Недавно попробовала Flutter 3.32 и хочу поделиться интересными улучшениями в релизе, которые могут сэкономить время и сделать разработку чуточку приятнее. Особенно понравились изменения, связанные с вебом, доступностью и новым виджетом Expansible.

▪️Горячая перезагрузка на вебе (экспериментально)
Наконец-то можно использовать hot reload в браузере! Это сильно ускоряет цикл разработки — больше не нужно каждый раз ждать полной перезагрузки страницы.

Чтобы включить, достаточно запустить:

bash
flutter run -d chrome --web-experimental-hot-reload

В VS Code можно настроить в launch.json, просто добавив аргумент --web-experimental-hot-reload. Работает так же, как и в мобильных проектах — r в терминале для быстрой перезагрузки, R для полного рестарта. А в DartPad теперь даже появилась кнопка «Reload».

▪️Улучшения доступности
Семантическое дерево теперь строится примерно на 80% быстрее — полезно для экранных дикторов и других assistive-технологий.

Появился новый API SemanticsRole, позволяющий явно указывать роли элементов (button, header, textField и другие), и это работает на уровне поддерева.

▪️Инструменты разработчика
В DevTools появился Flutter Property Editor. С ним можно редактировать свойства виджетов прямо в интерфейсе и сразу видеть изменения.
Обновили интерфейс DevTools, улучшили отслеживание памяти и работу с CPU-профайлером. Все стало быстрее и нагляднее.

▪️Новые виджеты и возможности темизации
Появился новый виджет Expansible и контроллер к нему. Он удобнее, чем старый ExpansionTile, и легко кастомизируется.

Поддержка Material 3 расширилась:
▫️Новый эффект InkSparkle
▫️Улучшенные SegmentedButton и Divider с поддержкой радиусов
▫️Новые колбэки для TabBar на hover и focus

▪️Поддержка десктопа и multi-window
— Canonical помогает улучшать поведение окон: события мыши, фокус, текстовые поля теперь работают стабильнее
— На Linux отрисовка вынесена в отдельный поток
— На Windows и macOS вызовы к платформе через Dart-FFI — теперь быстрее благодаря объединенным потокам.

▪️Dart 3.8
Новые возможности языка, в том числе:
— Null-aware элементы в коллекциях (if, for внутри списков и map'ов)
— Улучшенный форматтер — теперь, например, запятая в конце не исчезает
— Поддержка кросс-компиляции: можно собирать бинарники под Linux с других платформ

Кто тоже уже обновился?👀

Как и договаривались — ловите запись вчерашнего митапа с Сережей, Friflex Flutter Team Lead ⬆️

Если кратко:
🔸Темизация должна быть системной — не только цвета, но и шрифты, отступы, состояния, анимации и взаимодействие между компонентами
🔸Общение с дизайнерами критично — обсуждайте реализуемость решений заранее, чтобы избежать затрат и конфликтов
🔸Разработчик — не просто исполнитель — можно и нужно предлагать улучшения, инициировать создание UI-кита, структурировать код
🔸Theme Extensions — лучший компромисс — подходят большинству проектов, позволяют гибко кастомизировать без отказа от Material Design

Что еще почитать на эту тему:
📎Flutter:
•ThemeExtensions
•MaterialApp/ Cupertino
•InheritedWidget
•Theme и ThemeData
 
📎Design:
•Material Design + Human Interface Guidelines
•Стили, токены в Figma
 
Презентация — в комментариях⬇️

Повторим такой онлайн-формат?💜

Live stream finished (37 minutes)

Live stream started

Live stream scheduled for Jul 9, 2025 at 13:00

🕊️Встречаемся здесь, в канале @flutterfriendly, на митапе «Способы темизации и кастомизации мобильных приложений». Стартуем уже в 16:00

⏺Нам очень нравится с вами — хотим пообщаться в прямом эфире

Встречаемся на онлайн-митапе с Сережей, Friflex Flutter Team Lead.

Тема: «Способы темизации и кастомизации мобильных приложений».

О чем будем говорить:
🔵Различные подходы к темизации UI: от простых до сложных
🔵Когда какой метод лучше применять
🔵Основные проблемы с которыми сталкиваются разработчики

🖥Когда: 9 июля, 16:00 (по Мск)
📍Где: здесь, в канале @flutterfriendly

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

Если вы хоть раз думали о том, как открывать ссылки на Flutter, то точно видели пакет url_launcher. Но знаете ли вы, что его возможности этим не ограничиваются?

С помощью этого плагина можно:
✔️ Открывать URL-ссылки во внешнем браузере или прямо внутри приложения
✔️ Запускать почтовый клиент с уже заполненным письмом
✔️ Совершать звонки прямо из приложения
✔️ Открывать мессенджеры и другие приложения с поддержкой кастомных URL-схем

url_launcher – это плагин Flutter, предназначенный для взаимодействия с внешними приложениями с помощью стандартных URL-схем:  
tel:, mailto:, https:, sms: и других.

➡️  Совершаем звонок при помощи url_launcher

Future<void> launchCall({required String phoneNumber}) async {
  final Uri url = Uri.parse('tel:$phoneNumber');
  if (await canLaunchUrl(url)) {
    await launchUrl(url);
  } else {
    throw 'Не удалось запустить вызов на: $phoneNumber';
  }
}

➡️Отправляем e-mail

Future<void> launchEmail({required String email}) async {
  final Uri url = Uri.parse('mailto:$email');
  if (await canLaunchUrl(url)) {
    await launchUrl(url);
  } else {
    throw 'Не удалось открыть почтовый клиент для: $email';
  }
}

➡️Открываем сайт

Future<void> launchWeb({required String url}) async {
  final Uri uri = Uri.parse(url);
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri, mode: LaunchMode.externalApplication);
  } else {
    throw 'Не удалось открыть ссылку: $url';
  }
}

Но при подключении пакета не забываем о настройках Info.plist (iOS) и AndroidManifest.xml (Android), иначе canLaunchUrl может возвращать false.  
Подробнее — в документации пакета.

⌛Если вы нацелены на веб-платформу, стоит помнить:
— Ссылки можно открывать только в ответ на действие пользователя
— Все ссылки открываются во внешнем браузере
— Некоторые LaunchMode не поддерживаются и игнорируются

Основные методы пакета:
🔵 canLaunchUrl(Uri) — проверяет, может ли система обработать URL
🔵 launchUrl(Uri, {LaunchMode, ...}) — открывает указанный URL  
🔵 launchUrlString(String urlString, {LaunchMode, ...}) — альтернатива, если не хочется вручную парсить Uri
🔵 LaunchMode — перечисление, управляющее способом
🔵 platformDefault — по умолчанию (решает сама платформа)
🔵inAppWebView — открытие во встроенном WebView
🔵inAppBrowserView — встроенный браузер (Chrome Custom Tabs / Safari VC)
🔵externalApplication — открытие во внешнем приложении
🔵 externalNonBrowserApplication — открытие во внешнем не браузерном приложении

💡Но и, конечно, не забываем:
— Проверять URL через canLaunchUrl, чтобы избежать ошибок
— Использовать Uri.parse() вместо обычной строки — это безопаснее и надежнее
— Тестировать поведение на разных платформах (iOS, Android, Web) — оно может отличаться

На этом все! Наши ссылки все активны!🔗

Привет! Это Анна, Friflex Flutter Team Lead💫

Каждый Flutter-разработчик знаком с понятием состояния (state) в приложении. Сегодня мы поговорим о тех состояниях, которыми можно управлять, разберемся в классификации и рассмотрим их отличия.

Управляемые состояния Flutter-приложения можно разделить на два вида — эфемерное состояние (Ephemeral state) и состояние приложения (App state).

➡️ Эфемерное состояние еще можно назвать локальным состоянием. Это понятие очень точно описывает саму суть — такой вид состояния управляет только одним виджетом и не распространяется вне его контекста. Оно «живет» только вместе с конкретным виджетом, к которому привязано. Официальная документация в пример приводит текущую страницу PageView или выбранную вкладку BottomNavigationBar.

Самая простая реализация эфемерного состояния — использование Stateful-виджета и метода setState().

Для еще более простого понимания рассмотрим пример кастомного текстового поля с кнопкой очистки, которая должна отображаться, когда поле заполняется текстом. Создадим Stateful-виджет CustomTextField, State которого будет выглядеть следующим образом:



class _CustomTextFieldState extends State<CustomTextField> {
  late final TextEditingController controller;
  bool showClearButton = false;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
    controller.addListener(
      () => setState(() => showClearButton = controller.text.isNotEmpty),
    );
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(
        suffixIcon: showClearButton
            ? IconButton(
                icon: const Icon(Icons.clear),
                onPressed: () {
                  controller.clear();
                  setState(() {
                    showClearButton = false;
                  });
                })
            : null,
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}



Здесь мы видим очень простой пример эфемерного состояния. А что же такое состояние приложения?

➡️App state — это состояние, которое влияет на несколько виджетов. Может затрагивать и разные части приложения, например, разные экраны. Часто управление такими состояниями реализуется с помощью стейт менеджеров, например, Bloc или Redux.

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

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

📎Еще больше примеров и деталей можно найти в официальной документации.

Привет, с вами снова Катя, Flutter Dev Friflex!👋

Во время работы над модулем для взаимодействия с базой данных через Drift возникла необходимость часто повторять одни и те же типы функций — особенно когда речь шла о фильтрации и сортировке таблиц. Чтобы не тянуть за собой длинные сигнатуры, затаскивать библиотеку и не усложнять код, я решила использовать typedef.

Что такое typedef?
Typedef позволяет дать имя какому-то типу. Это особенно удобно, когда тип громоздкий, например, функция с дженериками, списки функций или колбэки. Сложный тип описывается один раз и дальше используется по имени — лаконично и понятно.

Пример
При работе с БД часто встречаются такие сигнатуры:

Expression<bool> Function(MyTable tbl)

List<OrderingTerm Function(MyTable tbl)>

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

// Вынесенная фильтрация
typedef FilterExpression<Q extends BaseTable> = Expression<bool> Function(Q tbl);

// Вынесенный список для сортировки
typedef OrderByExpressions<Q extends BaseTable> = List<OrderingTerm Function(Q tbl)>;

Как использовать?
Вместо длинных сигнатур теперь в универсальных функциях можно использовать понятные имена:

Future<List<T>> fetchFilteredData<T extends BaseTable>({
  required FilterExpression<T> where,
  OrderByExpressions<T>? orderBy,
}) async {}

Гораздо чище и легче воспринимается при чтении и навигации по коду.

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