Юра показал, что флаттер может быть везде, даже можно под чайник собрать ui 🥳

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

Хотя, как фишка, вдруг кому то пригодиться, недавно под Tizen и webos делал мини кинотеатр с стримингом, было больно интересно 😁 (

На пятых докладах из двух потоков у меня начала плавиться голова 🫠

Андрей рассказал про то, как ПО для управления дрона писали на флухтере, много низкоуровневых штук, как будто оказался на парах в вузе по ассемблеру 💀

Надо потыкать дрона, попробовать поуправлять 🙈

Никита уже рассказывал про свой пакет для BDUi (Duit), как делал оптимизацию новой версию

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

Конструктор как у divkit от Яндекса, но и написание без jsonов 🔔

@floral_whale (Роза) ❤️, рассказывала про их сервис локализации с OTA обновлениями, прикольно

Из известных мне вроде знаю только о phrase

Ждем когда доработают до конца 👍
Выглядит вроде как production-ready

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

Сегодня расскажу, как устроен Event Loop и почему понимание его работы критически важно для написания эффективного асинхронного кода.

Event Loop — это механизм управления асинхронностью, который обрабатывает задачи (events) в определенном порядке. Он позволяет выполнять операции ввода-вывода и другие длительные процессы без блокировки основного потока.

Основные компоненты
✔️Future — объект, представляющий результат асинхронной операции, который станет доступен в будущем
✔️Stream — поток асинхронных данных, который может передавать несколько значений со временем
✔️Event Loop — центральный механизм, управляющий очередями задач и их последовательным выполнением
✔️Система очередей
Event Loop работает с двумя типами очередей:

▪️Microtask Queue — очередь микрозадач с наивысшим приоритетом. Выполняется сразу после завершения синхронного кода, до обработки основных событий. 
▪️Event Queue — основная очередь событий, содержащая таймеры, операции ввода-вывода, Future и другие задачи.

Порядок: Сначала синхронный код → все микрозадачи → задачи из Event Queue.

Пример

import 'dart:async';

void main() {
  print('Начало');

  Timer(Duration(seconds: 1), () => print('Timer'));
  scheduleMicrotask(() => print('Microtask 1'));
  Future(() => print('Future')).then((_) => print('Future then'));
  scheduleMicrotask(() => print('Microtask 2'));

  print('Конец');
}

Вывод:

Начало
Конец
Microtask 1
Microtask 2
Future
Future then
Timer

Сначала выполняется синхронный код (Начало, Конец), затем обе микрозадачи, и только после этого Future и Timer из основной очереди.

Работа с async/await
Ключевые слова async и await упрощают работу с асинхронным кодом, делая его похожим на синхронный:

Future<void> fetch() async {
  print('Загрузка...');
  await Future.delayed(Duration(seconds: 2));
  print('Готово!');
}

void main() async {
  print('Старт');
  await fetch();
  print('Финиш');
}

Вывод:

Старт
Загрузка...
(пауза 2 секунды)
Готово!
Финиш

Оператор await приостанавливает выполнение функции до завершения Future, но не блокирует Event Loop — он может обрабатывать другие задачи.

Итого
Синхронный код всегда выполняется первым, микрозадачи имеют приоритет перед обычными событиями, а Future и Timer обрабатываются в порядке добавления в Event Queue.

❓Закрепим знания задачкой

В какой последовательности будут выведены значения?

import 'dart:async';

void main() {
  print('1');
  
  Future(() => print('2')).then((_) {
    print('3');
    scheduleMicrotask(() => print('4'));
  });
  
  scheduleMicrotask(() => print('5'));
  
  Future(() => print('6'));
  
  print('7');
}

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

Наверняка каждый Flutter-разработчик знает, что такое Isolate и как он работает. Немного освежим теорию в памяти.

Dart — однопоточный язык программирования. Когда мы создаем Flutter-приложения, все вычисления и операции выполняются по умолчанию в основном и единственном потоке — изоляте (Isolate).

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

В Dart изоляты можно запускать тремя основными способами:
1️⃣ Isolate.run() — метод запустит новый изолят, в котором будет выполнена переданная функция. По завершении операций из изолята вернутся ожидаемые данные, а поток самостоятельно завершится
2️⃣ Isolate.spawn() — также запускает новый изолят, в который необходимо передавать функцию для выполнения. При этом в отличие от изолята, запущенного через run(), дает возможность непрерывно обмениваться сообщениями с основным потоком
3️⃣ Isolate.spawnUri() — работает аналогично spawn() за одним исключением. В изолят можно отправить прямую ссылку на Dart-программу.

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

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

В решении этой задачи нам поможет Isolate.spawn() и порты получения данных ReceivePort().

Шаг 1. Создаем top-level метод парсинга данных в изоляте _parseInIsolate(). Метод должен принимать обязательно два порта отправки данных — порт отправки результата парсинга и порт отправки ошибок. Именно в этом методе мы закладываем логику обработки ошибки. В случае перехвата ошибки, отправляем ее в порт ошибок errorSendPort

Future<void> _parseInIsolate(
  ({
    SendPort dataSendPort,
    SendPort errorSendPort,
    List<Map<String, dynamic>> rawDataList,
  }) params,
) async {
  final result = <ResultEntity>[];

  for (final data in params.rawDataList) {
    try {
      // здесь выполняем парсинг каждого элемента
      result.add(...);
    } on Object catch (error, stackTrace) {
      // в случае ошибки парсинга конкретного объекта
      // отправляем ошибку обратно в главный изолят
      params.errorSendPort.send((error: error, stackTrace: stackTrace));
      continue;
    }
  }
  // в порт данных отправляем готовые объекты
  params.dataSendPort.send(result);
}
 

Шаг 2. Создаем метод получения данных fetchData(). В нем выполняем запрос на бэкенд. Дальнейшие шаги будут дополнять этот метод

Future<List<ResultEntity>> fetchData() async {
    final rawDataList = await _httpClient.get('v1/examples/data');
}

3 шаг. После получения данных создаем два порта ReceivePort(). Один порт будет отвечать за передачу обработанных объектов, второй — за передачу данных о локальных ошибках парсинга

final dataPort = ReceivePort();
final errorPort = ReceivePort();

Шаг 4. Открываем новый изолят и запускаем в нем метод _parseInIsolate(). Обязательно передаем в него два порта отправки и данные, которые надо обработать

    final isolate = await Isolate.spawn(
      _parseInIsolate,
      (
        dataSendPort: dataPort.sendPort,
        errorSendPort: errorPort.sendPort,
        rawDataList: rawDataList,
      ),
    );

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

💭Всем привет, это Роза, Flutter Dev Friflex

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

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

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

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

1️⃣ Чтобы шейдер стал частью приложения, достаточно подключить его в pubspec.yaml:

flutter: 
  shaders: 
    - shaders/my_shader.frag

Здесь важно именно расширение .frag. Flutter пока поддерживает только фрагментные шейдеры.

2️⃣ После этого загружаем шейдер:

late FragmentProgram program;

Future<void> loadMyShader() async {
  program = await FragmentProgram.fromAsset('shaders/my_shader.frag');
}

Объект FragmentProgram можно использовать для создания одного или нескольких экземпляров FragmentShader. 

3️⃣ Далее создаем FragmentShader и передаем нужные параметры. Например, размер canvas или время для анимации. Сам рендеринг удобно выполнять через CustomPainter:

class ShaderPainter extends CustomPainter {
  final FragmentShader shader;
  final double time;

  ShaderPainter(FragmentShader fragmentShader, this.time)
      : shader = fragmentShader;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    shader.setFloat(0, size.width);
    shader.setFloat(1, size.height);
    shader.setFloat(2, time);
    paint.shader = shader;
    canvas.drawRect(Offset.zero & size, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Важно помнить про несколько нюансов:
▪️Шейдеры во Flutter пока ограничены только фрагментными программами. Их размер и сложность влияют на вес сборки и производительность, поэтому лучше не переусердствовать
▪️Желательно кэшировать FragmentProgram, чтобы не загружать его повторно
▪️И, конечно, следить за количеством uniform-переменных

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

shader.setFloat(0, controller.value);

Контроллер меняет число каждый кадр, шейдер пересчитывает волну, и ваш UI плавно анимируется, нагружая GPU, а не CPU.

❕Ключевой момент: индекс в shader.setFloat(index, value) обязательно должен совпадать с порядком объявления uniform-переменных в GLSL-коде.

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

❤️ — если хотите посты, в которых мы разберем создание своего собственного шейдера и подключение его к анимации