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

В прошлом посте мы с вами разобрались, что такое JWT и зачем он нужен. А сегодня поговорим о том, как же нам реализовать авторизацию при помощи JWT во Flutter.

Для этого нам понадобится библиотека dart_jsonwebtoken, которая позволит нам создавать и верифицировать токены, а также библиотека для безопасного хранения данных на устройстве flutter_secure_storage.

✔️Серверная часть
Создание и подпись токена
Эта логика находится на сервере, который генерирует токен после успешной аутентификации пользователя.

Напомню, JWT состоит из трех частей: header, payload, signature. В коде это можно описать так (создание и подпись):

import 'package:dart_jsonwebtoken/dart_jsonwebtoken.dart';
import 'package:uuid/uuid.dart';

// Создаем полезную нагрузку (payload) для токена
final payload = {
  // jti — уникальный идентификатор токена, необходимый для Blacklist
  'jti': const Uuid().v4(), 
  'userId': 123,
  'role': 'user',
};

// Создаем экземпляр JWT
final jwt = JWT(payload);

// Подписываем токен с помощью секретного ключа
// Секретный ключ должен храниться только на сервере и никогда не передаваться на клиент!
// expiresIn задает срок действия токена в секундах
final token = jwt.sign(
  SecretKey('ВАШ_СЕКРЕТНЫЙ_КЛЮЧ'), 
  expiresIn: const Duration(minutes: 15),
);

Библиотека dart_jsonwebtoken автоматически добавляет header и signature, а также поле exp (срок действия) на основе expiresIn.

Также возможно создание ключей по другим алгоритмам (RSA SHA-256, ECDSA P-256, ECDSA secp256k и другим). Для этого необходимо прокинуть key с  нужным алгоритмом в sign.

Например:

// Читаем приватный ключ из файла
final pem = File('./rsa_private.pem').readAsStringSync();
final key = RSAPrivateKey(pem);

// Подписываем токен с указанием алгоритма
final token = jwt.sign(key, algorithm: JWTAlgorithm.RS256);

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

try {
  // Верифицируем токен с помощью секретного ключа
  final jwt = JWT.verify(token, SecretKey('SECRET_KEY'));

  // Если верификация успешна, можно получить полезную нагрузку
  print('Payload: ${jwt.payload}');

} on JWTExpiredException {
  // Срок действия токена истёк
  print('Token expired');
} on JWTInvalidException {
  // Токен недействителен (изменён, некорректная подпись)
  print('Token is invalid');
}

dart_jsonwebtoken автоматически проверяет срок действия токена и выбрасывает исключение, если он истек.

Отзыв токена: Refresh Token и Blacklist

Основная проблема JWT: даже если пользователь вышел из системы, токен остается валидным до истечения срока действия. Чтобы решить эту проблему, используются короткоживущие Access Token и долгоживущие Refresh Token, а также черный список (Blacklist). Подробнее об этом было в прошлом посте. 

Реализовать blacklist вы можете примерно таким образом: 

Добавляете таблицу blacklisted_tokens для хранения jti (JWT ID). Далее при генерации токена задаете уникальный ID, например, с помощью пакета uuid

import 'package:uuid/uuid.dart';

final uuid = Uuid();
final payload = {
  …,
  'jti': uuid.v4(), // Уникальный ID токена
};

А при проверке учитываете blacklist:

bool valid(String secretKey, {Set<String> blackList = const {}}) {
  final jwt = JWT.verify(token, SecretKey('SECRET_KEY'));
  final jti = jwt.payload['jti'] as String?;
  final notBlacklisted = !(jti != null && blackList.contains(jti));
  return notBlacklisted;
}

Клиентская часть в комментариях👇

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

Сегодня поговорим про архитектуру — разберемся, чем отличается ephemeral state от app state во Flutter и как с ними работать.

Что такое state?

В самом широком смысле, state — это все, что хранится в памяти приложения во время его работы: шрифты, текстуры, анимации, UI, переменные.

Но управляем мы далеко не всем. Например, за текстуры отвечает сам Flutter. Нам важнее другое определение:

👉 State — это данные, необходимые для перестроения UI в любой момент времени.

Ephemeral state (локальное состояние)

Ephemeral state (еще называют UI state или локальным состоянием) — это данные, которые можно «замкнуть» в рамках одного виджета.

Примеры:
▫️текущая страница в PageView
▫️выбранный таб в BottomNavigationBar
▫️прогресс анимации

Такое состояние:
✔️не нужно сохранять между сессиями
✔️не нужно шарить по всему приложению
✔️меняется локально

Обычно для него достаточно StatefulWidget + setState().

Пример с BottomNavigationBar:

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

  @override
  State<MyHomepage> createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

Здесь _index — это ephemeral state. Он живет только в этом экране и спокойно сбрасывается при перезапуске приложения.

App state (глобальное состояние)

App state (или shared state) — это данные, которые:
▫️нужны разным экранам
▫️должны сохраняться между сессиями
▫️определяют ключевую бизнес-логику

Примеры:
▪️данные пользователя (логин, токен)
▪️настройки и предпочтения
▪️корзина в e-commerce
▪️уведомления или список непрочитанных статей

Для управления app state часто используют:
✔️Provider / Riverpod — декларативный state management
✔️Redux / BLoC — для сложных приложений
✔️Hive / SharedPreferences — для сохранения на диск

Нет универсального правила. Важно понимать: граница между ephemeral и app state условная.

Например, выбранный таб в BottomNavigationBar может быть ephemeral state (если он нужен только внутри экрана), но стать app state, если:
▪️нужно восстанавливать его при повторном входе
▪️он влияет на другие части приложения

Автор Redux, Дэн Абрамов, говорил:

«The rule of thumb is: Do whatever is less awkward»

То есть используйте то решение, которое проще и естественнее именно в вашем случае.

Если кратко:
Во Flutter есть два типа состояния:
✔️Ephemeral state — локальный, простой, живет в одном виджете, управляется через setState()
✔️App state — общий, сложный, нужен разным экранам и сохраняется между сессиями

Идеальный подход — гибко сочетать оба вида в зависимости от задач.

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

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

Библиотека provider — одна из наиболее известных во Flutter-сообществе. Она дает доступ к специальному виджету Provider и его вариациям, которые сами разработчики пакета позиционируют как более удобную версию InheritedWidget:

A wrapper around InheritedWidget to make them easier to use and more reusable.

Здесь важно понять, что Provider работает по тому же принципу, что и InheritedWidget — данные прокидываются по дереву виджетов, а доступ к ним в любой момент можно получить по контексту.

Передача данных
Provider позволяет удобно передавать данные дальше по дереву виджетов. Как и InheritedWidget, его необходимо встраивать в дерево выше тех мест, которые будут использовать передаваемые данные.

Реализовать это можно двумя способами.

1. С помощью стандартного конструктора Provider()
Здесь создание источника данных выполняется через функцию create.

Provider(
        create: (context) => CustomData(),
        child: Container(),
      ),

2. С помощью конструктора Provider.value()
Этот конструктор не будет создавать новый экземпляр источника данных — он требует передачу уже ранее созданного.

final customData = CustomData();
...
Provider.value(
        value: customData,
        child: Container(),
      ),

При необходимости провайдить несколько источников данных можно использовать MultiProvider.

Кроме этого библиотека дает доступ к множеству разных видов провайдера, например, StreamProvider и FutureProvider.

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

1. context.read<T>() — однократно считывает данные
2. context.watch<T>() — прослушивает данные, при их изменении обновляет текущий виджет
3. context.select<T, R>(R cb(T value)) — прослушивает только указанную часть данных, например, одно поле

Библиотека также дает доступ к виджетам Consumer и Selector. Они так же, как методы context.watch и context.select,прослушивают изменения данных провайдера, но позволяют ребилдить не весь текущий виджет, а только дочерние.

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('Строка 1'),
        Text(context.watch<CustomData>().data), // заставит перестроиться весь виджет Example
        const Text('Строка 3'),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('Строка 1'),
        Consumer<CustomData>( // перестроит только дочерний Text
          builder: (context, customData, _) {
            return Text(customData.data);
          },
        ),
        const Text('Строка 3'),
      ],
    );
  }
}

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

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

Недавно от вас был запрос разобрать SliverPersistentHeader. Но прежде чем углубиться в него, давайте вспомним, что такое slivers и каких видов они бывают.

Этот пост я решила разделить на две части:
✔️в этой — обзор и базовая теория
✔️в следующей — разберем на практике, как менять прозрачность и расположение элементов при скролле

Начнем!

Что такое Sliver?

Sliver — это часть прокручиваемой области с гибко настраиваемым поведением.

В отличие от стандартных виджетов вроде ListView, GridView или Column, которые создают обычный прокручиваемый список, Sliver-виджеты работают в связке с CustomScrollView.

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

Чтобы наполнить CustomScrollView элементами, можно использовать разные виды Sliver. Например:
▪️SliverAppBar: AppBar с поддержкой скролла и анимаций. Он может фиксироваться, а также изменять свою высоту и внешний вид при прокрутке
▪️SliverToBoxAdapter: позволяет разместить обычный виджет внутри CustomScrollView
▪️SliverFillRemaining: заполняет все оставшееся пространство в области просмотра
▪️SliverList: создает список элементов
▪️SliverFixedExtentList: список с фиксированной высотой элементов. Он более производителен, чем SliverList, когда все элементы имеют одинаковый размер

SliverFixedExtentList(
  itemExtent: 50,
  delegate: SliverChildListDelegate(items),
)

▪️SliverPrototypeExtentList: высота задается прототипом (удобно, когда элементы одинаковой высоты, но зависят от контента)
▪️SliverVariedExtentList: позволяет элементам иметь разные размеры
▪️SliverReorderableList: список, в котором можно менять порядок элементов
▪️SliverAnimatedList: список с анимацией вставки/удаления
▪️SliverFillViewport: каждый элемент заполняет всю область просмотра. Размер элементов можно регулировать с помощью viewportFraction
▪️SliverGrid: отображает элементы в виде сетки
▪️SliverAnimatedGrid: SliverGrid с анимацией вставки и удаления

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  delegate: SliverChildListDelegate(items),
)

Управление расположением и отступами

Для управления расположением Sliver-виджетов используются:
▫️SliverPadding: добавляет отступы для другого Sliver-виджета

SliverPadding(
  padding: const EdgeInsets.all(50),
  sliver: SomeSliver(),
)

▫️SliverSafeArea: добавляет отступы от системных областей UI
▫️SliverConstrainedCrossAxis: ограничивает размер дочернего Sliver-виджета по поперечной оси
▫️SliverMainAxisGroup: позволяет объединить несколько Sliver-виджетов подряд. В отличие от SliverList, этот виджет подходит для элементов разной высоты

SliverMainAxisGroup(
  slivers: [Sliver1(), Sliver2()],
)

▫️SliverCrossAxisExpanded: распределяет пространство по flex-коэффициенту

Делегаты

Говоря о Sliver-списках, нельзя не упомянуть о делегатах, которые определяют, как и когда создавать элементы:
✔️SliverChildListDelegate: используется для фиксированного списка виджетов
✔️SliverChildBuilderDelegate: лениво создает элементы через builder (для длинных списков)

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(title: Text(items[index])),
    childCount: items.length,
  ),
)

✔️SliverGridDelegateWithFixedCrossAxisCount: сетка с фиксированным количеством колонок
✔️SliverGridDelegateWithMaxCrossAxisExtent: адаптивная сетка с максимальной шириной элемента

Продолжение в комментариях👇

🚩Привет, это Катя, Flutter Dev Friflex. Сегодня поговорим про Feature Flags

Что такое Feature Flags?
Feature Flags — это техника управления функционалом приложения, при которой фичи можно включать или выключать без изменения кода и деплоя.

Как работает?
В коде фича окружена проверкой флага:

if (featureFlags.isEnabled('newPaymentFlow')) {
  showNewPaymentScreen();
} else {
  showOldPaymentScreen();
}

Флаги хранятся локально, в конфигурации или на сервере.

Плюсы
✅Позволяет постепенно внедрять новые функции
✅Упрощает A/B тесты и эксперименты
✅Можно быстро отключить проблемную функцию без деплоя

Минусы
➖Сложность управления множеством флагов
➖Код может становиться запутанным из-за множества условий
➖Требует дисциплины — старые флаги нужно удалять

И небольшой вопрос на засыпку⬇️

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

Сегодня поговорим про виджеты для обработки нажатий и жестов на экране во Flutter-приложениях. Самые распространенные — GestureDetector, InkWell и Listener. Разберем, чем они отличаются и в каком случае лучше использовать тот или иной виджет.

GestureDetector — самый универсальный виджет. Он имеет широкий спектр отслеживания жестов на экране. С его помощью можно обработать как простые одинарные или двойные нажатия (onTap, onDoubleTap), так и более сложные действия, например, свайпы и жесты масштабирования (onHorizontalDrag, onVerticalDrag, onPan, onScale).

Кроме того, что GestureDetector дает возможность отслеживать жесты, некоторые колбэки также возвращают объекты дополнительных сведений о манипуляции пользователя. Например, колбэк onHorizontalDragUpdate вызывается при горизонтальном свайпе и дает доступ к объекту DragUpdateDetails. В нем содержатся данные о позиции указателя и координатах смещения. Это может быть полезно, когда необходимо отслеживать, где именно был выполнен свайп.

Визуально виджет никак не реагирует на жесты и не требует обязательной обертки в Material-виджет.

GestureDetector(
      onTap: () => print('Tapped!'),
      onLongPress: () => print('Long Pressed!'),
      onScaleUpdate: (details) => print(
        'Scale Updated: ${details.scale}',
      ),
      onHorizontalDragUpdate: (details) => print(
        'Drag Updated: ${details.delta}',
      ),
    );

InkWell — наиболее простой виджет из сегодняшнего списка. Он позволяет отслеживать только самые простые нажатия (onTap, onDoubleTap, onLongPress).

Как и GestureDetector, некоторые колбэки возвращают основную информацию о произведенном жесте.

Но в отличие от GestureDetector, отображает анимацию нажатия. Этот визуальный эффект легко кастомизировать. InkWell требует обязательного наличия любого Material-виджета в качестве родителя.

InkWell(
      onTap: () => print('Tapped!'),
      onTapUp: (details) => print('Tap Up: ${details.localPosition}'),
      hoverDuration: const Duration(milliseconds: 100),
      highlightColor: Colors.red,
      child: Container(
        padding: const EdgeInsets.all(16.0),
        child: const Text('Tap me!'),
      ),
    );

Listener — низкоуровневый виджет для обработки событий указателя.

Его основное отличие от GestureDetector и InkWell в том, что он не отслеживает сами жесты, не распознает их отличия друг от друга. Он работает непосредственно с указателем, дает полные данные о его поведении.

Как и GestureDetector, виджет не дает никакого визуального отклика.

Listener(
      onPointerDown: (event) => print('Pointer Down: ${event.localPosition}'),
      onPointerPanZoomStart: (event) => print('Pointer Pan Zoom Start: ${event.localPosition}'),
      onPointerMove: (event) => print('Pointer Move: ${event.localPosition}'),
    );

Подведем итог — когда же применять каждый из них?

✔️InkWell используйте для обработки самых простых нажатий, когда требуется минимум контроля над действием, а также когда в интерфейсе необходима визуальная анимация жеста.

✔️GestureDetector будет полезен при отслеживании нестандартных жестов, например, свайпов в каком-то конкретном направлении или масштабировании. Также его можно использовать вместо InkWell, когда не требуется показывать никакие визуальные эффекты.

✔️Listener применяйте для самых специфических задач. Он отлично подойдет, когда вам потребуется отслеживать события указателя в нестандартных движениях пользователя. Если GestureDetector не сможет помочь в вашей задаче, Listener точно справится.

💻С Днем программиста!

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

Вы — волшебники, которые превращают идеи в работающие продукты. А теперь отложите телефон, суббота — для отдыха💜

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

В прошлом посте мы разобрали slivers и зачем они нужны. Сегодня поговорим про SliverPersistentHeader.

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

Так как SliverPersistentHeader сам по себе не знает, как отображать содержимое, он использует делегат — SliverPersistentHeaderDelegate. Он управляет его поведением и внешним видом через:
✔️ build — определяет, как выглядит виджет на каждом этапе прокрутки
✔️ maxExtent — задает максимальную высоту заголовка в его развернутом состоянии
✔️ minExtent — определяет минимальную высоту, до которой заголовок сжимается
✔️ shouldRebuild — условие для перерисовки делегата

Внутри метода build доступны параметры:
▪️ double shrinkOffset — показывает, насколько сильно заголовок сжался (от 0 до maxExtent — minExtent)
▪️ bool overlapsContent — указывает, перекрывает ли содержимое последующие сливеры

Для управления поведением заголовка при прокрутке у SliverPersistentHeader есть параметры pinned и floating:
▫️ pinned: true — шапка остается закрепленной, когда прокрутка достигает минимальной высоты
▫️ floating: true — заголовок появляется сразу, как только пользователь начинает прокручивать страницу вверх, даже если прокрутка еще не дошла до самого верха

Пример использования

Давайте реализуем пример «сжимающейся» шапки профиля, где аватар и заголовок плавно меняют свой размер и положение при скролле.

Шаг 1: Подготовка виджетов

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

1. ColoredContainer для затемнения фона

class ColoredContainer extends StatelessWidget {
  const ColoredContainer({super.key, required this.progress});
  final double progress;

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: progress,
      child: const ColoredBox(color: Colors.black54),
    );
  }
}

2. HeaderTitle для заголовка, который будет смещаться к центру

class HeaderTitle extends StatelessWidget {
  const HeaderTitle({super.key, required this.progress});
  final double progress;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 100),
      padding: EdgeInsets.lerp(
        const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
        const EdgeInsets.only(bottom: 16),
        progress,
      ),
      alignment: Alignment.lerp(
        Alignment.bottomLeft,
        Alignment.bottomCenter,
        progress,
      ),
      child: Text(
        'Profile',
        style: TextStyle.lerp(
          Theme.of(context).textTheme.titleLarge!.copyWith(color: Colors.white),
          Theme.of(context).textTheme.titleMedium!.copyWith(color: Colors.white),
          progress,
        ),
      ),
    );
  }
}

Продолжение — в комментариях 👇

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

Сегодня расскажу про dart:ffi — интерфейс для вызова нативного кода (C/C++) напрямую из Dart.

Зачем нужен dart:ffi

Обычно для связи Flutter с нативом мы используем MethodChannel. Но бывают задачи, где этот способ слишком громоздкий или недостаточно быстрый. В таких случаях выручает dart:ffi:
✔️доступ к системным API напрямую
✔️использование готовых библиотек на C (SQLite, OpenSSL, TensorFlow Lite и других)
✔️оптимизация производительности тяжелых вычислений

Как это работает
▫️Dart связывается с C через указатели и структуры
▫️Нужные функции подключаются через DynamicLibrary.open()
▫️Типы приходится преобразовывать: Dart ⇄ C

Пример: подключаем простую C-функцию

C-библиотека math.c:

C
// math.c
int sum(int a, int b) {
  return a + b;
}

Компиляция в динамическую библиотеку:
▪️Linux/Mac: gcc -shared -o libmath.so math.c
▪️Windows: gcc -shared -o math.dll math.c

Dart-код (main.dart):

import 'dart:ffi';
import 'dart:io';

// Загружаем библиотеку
final dylib = Platform.isWindows
    ? DynamicLibrary.open("math.dll")
    : DynamicLibrary.open("libmath.so");

// Сигнатура функции C
typedef c_sum_func = Int32 Function(Int32, Int32);
typedef dart_sum_func = int Function(int, int);

// Получаем функцию
final sum = dylib.lookupFunction<c_sum_func, dart_sum_func>('sum');

void main() {
  print(sum(3, 4)); // 7
}

Основные типы FFI
▪️ Int8, Int16, Int32, Int64 ↔ int
▪️ Float, Double ↔ double
▪️ Pointer<T> — указатель на C-объект
▪️ Struct — структуры данных

Когда использовать

✅ Использовать:
▫️подключение нативных библиотек (sqlite3, opus, zlib)
▫️задачи производительности (машинное обучение, криптография)
▫️системные API iOS/Android

❌ Не использовать:
▫️в обычных Flutter-приложениях (чаще достаточно MethodChannel)
▫️если задачу можно решить чистым Dart или готовым пакетом

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

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

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

Адаптивная верстка — это верстка, которая автоматически подстраивается под разные размеры и типы экранов.

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

Для поддержания адаптивности верстки могу порекомендовать 5 самых полезных и универсальных виджетов.

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

final screenWidth = MediaQuery.sizeOf(context).width;
final aspectRatio = MediaQuery.sizeOf(context).aspectRatio;
final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
 

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

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait
      ? OneColumnView()
      : TwoColumnsView();
    },
)

3. LayoutBuilder
Этот виджет отслеживает изменения размеров родительского виджета (или экрана, если родительский виджет не будет иметь ограничений). Так же, как и OrientationBuilder, при изменении отслеживаемых параметров он будет перестраивать вложенные виджеты.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 400) {
      return WideLayout();
    } else {
      return NarrowLayout();
    }
  },
)

4. AspectRatio
Позволяет задавать дочернему виджету соотношение сторон. Например, у вас стоит задача добавить на экран рекламный баннер, в который будут приходить изображения с сервера. В таком случае, если зафиксировать, допустим, высоту, а ширину оставить по размеру экрана, то картинка будет обрезаться. Здесь оптимальным решением будет добавить AspectRatio с соотношением сторон, совпадающим с соотношением изображения баннера.

AspectRatio(
  aspectRatio: 16 / 9,
  child: Image.network(src),
)

5. ConstrainedBox
Довольно часто при адаптации верстки под планшеты требуется ограничивать ширину содержимого страницы так, чтобы она не была шире определенного значения. При этом на меньших устройствах содержимое должно быть по ширине экрана. Именно здесь на помощь придет ConstrainedBox. Он позволяет задать минимальные и максимальные размеры дочерних виджетов.

ConstrainedBox(
  constraints: const BoxConstraints(
    maxWidth: 400,
  ),
  child: const Card(child: Text('Hello World!')),
)

P.S. и конечно же не забываем про базовые flex-виджеты — Flexible и Expanded.

Делитесь своими советами по адаптивной верстке в комментариях💬

➡️Всем привет! Это Роза, Flutter Dev в Friflex

Если вы хоть раз делали приложение и для Web, и для мобильных платформ, то точно сталкивались с конфликтами библиотек dart:io и dart:html (а точнее, уже dart:web) или других платформенно-специфичных пакетов. Вы могли увидеть примерно такое сообщение в консоли:

Failed to build iOS app

Error (Xcode): lib/main.dart:7:8: Error: Dart library 'dart:html' is not available on this platform.

или, например:

Running Gradle task 'assembleDebug'...  
../lib/web_widgets/url_functions_web.dart:19:31: Error: Type 'ui.HashUrlStrategy' not found.  
class UrlPathStrategy extends ui.HashUrlStrategy {  
^^^^^^^^^^^^^^^^^^  
........

И это объяснимо, ведь мы используем пакет, который не поддерживается в мобильном устройстве, все просто и понятно.

Давайте по порядку! 

◾️ dart:io — библиотека для работы с файлами, сокетами и прочим «системным» API. Он поддерживается только на мобильных и desktop устройствах.
◾️ dart:html(dart:web) — библиотека для работы с DOM и Web API. Поддерживается только в браузере.
    
Соответственно, если мы подключаем dart:io в вебе или dart:web на мобильных устройствах, компилятор выдаст ошибку.

Чтобы решить эту проблему, можно:
1. Использовать сторонние кроссплатформенные библиотеки:
Например, cross_file.
Этот пакет предоставляет абстракцию XFile, которая позволяет работать с файлами на всех платформах (Web, Desktop, Mobile).

При помощи cross_file, например, вы можете сделать файловый пикер:

Future<XFile?> showFilePicker({List<String>? extensions}) {
  return FilePicker.platform.pickFiles(
    allowedExtensions: extensions,
    type: extensions?.isNotEmpty ?? false ? FileType.custom : FileType.any,
  ).then((result) {
    return result?.xFiles.firstOrNull;
  });
}

2. Делать условные импорты

Если подходящей библиотеки нет, можно подключать разные реализации под разные платформы. Например, для настройки ClientChannelBase для grpc. Подробнее о grpc можете прочитать здесь.

export 'grpc_stub.dart'
  if (dart.library.io) 'grpc_io.dart'
  if (dart.library.js_interop) 'grpc_web.dart';

При использовании этого файла (импорте его в ваш виджет) Dart сам подставит нужную реализацию в зависимости от платформы:
✔️ если это мобильные или desktop → grpc_io.dart
✔️ если это Web → grpc_web.dart
✔️ а если ни одна из библиотек не доступна →  grpc_stub.dart

grpc_stub.dart (заглушка):

import 'package:grpc/grpc_connection_interface.dart';

ClientChannelBase setupChannel(String url) =>
    throw UnimplementedError();

grpc_io.dart (Mobile/Desktop):

import 'package:grpc/grpc.dart';
import 'package:grpc/grpc_connection_interface.dart';

ClientChannelBase setupChannel(String url) {
  return ClientChannel(
    uri.host,
    port: uri.port,
    options: ChannelOptions(credentials: credentials),
  );
}

grpc_web.dart (Web):

import 'package:grpc/grpc_connection_interface.dart';
import 'package:grpc/grpc_web.dart';

ClientChannelBase setupChannel(String url) {
  return GrpcWebClientChannel.xhr(uri);
}

А в коде используем :

late final ClientChannelBase channel = setupChannel(baseUrl);

Вот и все! Делитесь в комментах вашими лайфхаками при работе с кроссплатформой!

Google Play 2025: что нового для разработчиков и пользователей

Привет, это Катя, Flutter Dev Friflex. Недавно Google Play выпустил большую обнову, которая затронула разработчиков, игроков и обычных пользователей. Сегодня коротко расскажу про самое главное, а подробнее можно почитать тут.

👨‍💻 Для разработчиков

В Play Console появились новые метрики (предрегистрации, открытия страниц), библиотека для хранения креативов и даже кнопка, чтобы остановить проблемный релиз

Engage SDK теперь работает и в Play Store, а значит — больше персональных подборок и контента прямо на главной

В Play Games Services достижения стали заметнее — их видно в поиске и на карточках игр

🎮 Для игроков

В программе Play Points запустили Diamond District в Roblox — с эксклюзивным VIP-доступом и мерчем для Gold+

Google Play Games for PC добавил мультиаккаунты и мультиокна. Теперь можно играть сразу в несколько игр (или в одну, но с разных аккаунтов 😏)

На Google TV появились рейтинги и отзывы, а на часах (Wear OS) — персональные рекомендации циферблатов

🔒 Безопасность

Кампания Download Apps, Not Traps — теперь каждое приложение проходит больше 10 000 проверок безопасности

В Play Integrity API добавили новые защиты от взломов и злоупотреблений

💳 Платежи

Больше способов оплаты: PayPal в Сингапуре, Napas во Вьетнаме, Airtel в Кении и других странах

В Индонезии появился QRIS — новый стандарт для бесконтактных платежей

Подписки стали удобнее: можно покупать несколько сразу, есть напоминания о бенефитах и увеличенные grace-периоды. Для разработчиков — возможность ставить цены до $5000

🌍 Глобальные проекты

Google продолжает поддерживать стартапы по всему миру:
программы для студий в Корее, Индонезии, Индии и Латинской Америке

#WeArePlay — серия историй про разработчиков, например, про игру, которая помогла высадить 360 000 деревьев

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

💬А что думаете вы по поводу этих обновлений?

🗣️Привет! С вами Анна, Flutter Team Lead Friflex.

Поговорим об одном из самых распространенных плагинов для Flutter-приложений — cached_network_image. Думаю, уже многие с ним знакомы, но сегодня разберем как эффективно использовать его функционал.

cached_network_image — это плагин, который позволяет не только загружать и отображать изображения из сети, но кэшировать их на устройстве. Эта функция является его главным преимуществом перед стандартным Image.network.

Для его использования достаточно добавить в верстку виджет CachedNetworkImage и передать ему ссылку на изображение в поле imageUrl.

CachedNetworkImage(
  imageUrl: url,
),

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

CachedNetworkImage(
  imageUrl: url,
  placeholder: (context, url) => const AppSkeleton(),
),

Если вам необходимо отображать прогресс загрузки, идеальным решением вместо placeholder станет progressIndicatorBuilder. Он с помощью данных класса DownloadProgress даст вам полный доступ к информации о размере изображения и текущему загруженному объему

CachedNetworkImage(
  imageUrl: url,
  progressIndicatorBuilder: (context, url, progress) {
    return AppProgressIndicator(progressValue: progress.progress);
  },
),

Также важно не забывать, что загрузка может прерваться из-за ошибки. На такой случай рекомендую использовать errorWidget, который позволит отобразить заглушку. А для отслеживания самой ошибки будет полезен колбэк errorListener. Он оповестит вас о том, какая возникла ошибка и в какой момент.

CachedNetworkImage(
  imageUrl: url,
  errorWidget: (context, url, error) => AppErrorView(),
  errorListener: (error) => print(error),
),

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

Для этого вам потребуется дополнительно подключить в проект flutter_cache_manager. Библиотека дает доступ к объекту DefaultCacheManager, который в свою очередь необходимо передать в CachedNetworkImage.

final cacheManager = DefaultCacheManager();
...
CachedNetworkImage(
  imageUrl: url,
  cacheManager: cacheManager,
),

Теперь через cacheManager можно выполнять всевозможные манипуляции с кэшированными изображениями: извлекать или удалять по ключу, очищать кэш полностью.

await cacheManager.emptyCache(); // полная очистка кэша
await cacheManager.removeFile(key); // удаление конкретного файла из кэша
await cacheManager.getFileFromCache(key); // извлечение конкретного файла из кэша

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

final customCacheManager = CacheManager(
  Config(
    'customCacheKey',
    stalePeriod: const Duration(days: 7), // срок жизни кэша
    maxNrOfCacheObjects: 100, // максимальное количество объектов в кэше
  )
 );
...
CachedNetworkImage(
  imageUrl: url,
  cacheManager: customCacheManager,
),

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

🌠 Если вы ждали знак, это он!

Разыгрываем 2 билета на CrossConf — главную конференцию по кроссплатформенным технологиям в России и СНГ.

В программе — двойной поток по Flutter от спикеров из Магнит Маркета, Лаборатории Касперского, BetBoom, Яндекс Про, Friflex и других технологичных компаний, доклады по Crossplatform и Al, нетворкинг, встреча с самой активной частью Flutter-сообщества и веселая вечеринка 🪩

Условия конкурса:
☑️Подписаться на @crossconf и @flutterfriendly
☑️Нажать «участвую» под постом по ссылке.

Итоги подведем 13 октября. Удачи 💙

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

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

Для пользователя это простое и понятное движение — содержимое экрана нужно потянуть сверху вниз и отпустить. В момент, когда Pull to Refresh срабатывает, пользователю показывается индикатор загрузки. Как только новые данные получены, содержимое экрана меняется, а индикатор загрузки исчезает.

Этот механизм считается неким «золотым стандартом», почти каждое коммерческое приложение не обходится без него. Почему?

▫️ Жест понятен. Пользователи уже настолько привыкли к такому поведению, что их не нужно дополнительно обучать

▫️ Процесс обновления прозрачен и нагляден. Красивые анимации, индикатор загрузки, плавные жесты — все это дает пользователю ощущение полного контроля и не вызывает вопросов

▫️ Механизм дает пользователю обновлять данные, когда он сам захочет. Это повышает его доверие и лояльность к продукту

▫️ Механизм стал настолько распространенным, что его реализация не вызывает проблем на всех платформах

Как реализовать Pull to Refresh во Flutter-приложении?

▪️Базовый виджет RefreshIndicator
Это самый простой способ. Для реализации достаточно прокручиваемый виджет на экране обернуть в RefreshIndicator, а затем добавить вызов onRefresh.

RefreshIndicator(
  onRefresh: () async {
    // обновить данные тут
  },
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) => ChildWidget(),
  ),
)

Готово! Такая реализация легко поддерживается и является стабильной.

Но тут важно учесть, что RefreshIndicator не позволит вам особенным образом кастомизировать индикатор загрузки — это всегда будет CircularProgressIndicator, который можно лишь немного видоизменить.

Также важно, что он работает только в паре с Scrollable-виджетом и может реализовать только базовый жест сверху вниз.

▪️Библиотека pull_to_refresh
Если возможностей RefreshIndicator окажется недостачно, на помощь придет SmartRefresher из библиотеки pull_to_refresh.

Этот виджет позволит не только обработать жест перезагрузки (сверху вниз), но и жест дозагрузки (снизу вверх). Можно реализовать механизм по горизонтали с помощью scrollDirection.

SmartRefresher(
  enablePullDown: true, // включает жест сверзу вниз
  enablePullUp: true, // включает жест снизу вверх
  scrollDirection: Axis.vertica l// указывает направление жестов
  onRefresh: _onRefresh, // обработка обновления
  controller: _refreshController,
  child: ListView(...),
);

SmartRefresher удобен тем, что его индикатор загрузки можно кастомизировать. Пакет уже дает готовые решения, например, WaterDropHeader. С помощью CustomHeader и CustomFooter вы можете настроить вид под свои нужды.

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

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

Делитесь своим опытом в комментариях😘