Как мы сделали Flutter-проект уровня enterprise

Разработать кроссплатформенное мобильное приложение — платформу, где текст, видео, аудио и фото собираются в единую историю. Чтобы каждый пользователь мог «смонтировать» свой рассказ, перетаскивая блоки контента, как кадры на таймлайне. Читать можно без регистрации, а для создания публикаций нужна авторизация.

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

· Разработан кастомный высокопроизводительный текстовый редактор, который обеспечивает плавность интерфейса на уровне 60 fps;

· Формат приложения объединяет работу с текстом и добавление мультимедиа: фото, видео и аудио.

· Внедрен механизм drag-and-drop контентных блоков, аналогичный монтажу на таймлайне.

· Реализована «умная» подгрузка медиа через Selectel S3.

· Реализована многоязычность — приложение работает на восьми языках, включая китайский и японский.

· Проведены краш-тесты на огромных данных (тексты до 180 МБ).

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

Одним из ключевых и самых интересных этапов проекта стала разработка собственного текстового редактора.

Почему потребовалась разработка кастомного решения:

· при анализе готовых библиотек выяснилось, что часть из них построена на WebView и JavaScript, что ведет к просадкам производительности при работе с большими текстами и при активном редактировании;

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

· требовалась возможность свободного перемещения блоков — текста, фото, видео и аудио — между собой;

· нужно было обеспечить единую логику поведения на Android и iOS при сохранении нативной отзывчивости интерфейса;

· архитектура должна была выдерживать работу с большими документами — объемом до сотен мегабайт текста и множества медиафайлов;

· важно было сохранить плавность работы (60 fps) даже при сложных операциях редактирования и рендеринга.

Для реализации редактора мы выбрали Flutter. Фреймворк дает глубокий контроль над рендерингом, позволяет работать на уровне виджетов и при этом обеспечивает кроссплатформенность. Но в задачах такого уровня Flutter — это только база. Чтобы добиться нативного поведения и высокой производительности, пришлось уходить вглубь — вплоть до нативных слоев Android и iOS.

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

Работа с вводом текста во Flutter управляется структурой TextEditingValue. Она содержит три параметра: сам текст, позицию курсора (selection) и участок текста, который редактируется в данный момент (composing). Однако, Flutter не умеет работать с composing. Эта функция контролируется самой платформой - Android или iOS. Поэтому, чтобы добиться поведения как в системных редакторах, требуется участие разработчиков на уровне нативного кода.

Еще один слой задач — работа с мультимедиа. Пользователь может вставлять фото, видео и аудио любых форматов и размеров. Чтобы избежать потери качества и избыточной нагрузки на устройство, мы привели все медиа к единому стандарту обработки. Для генерации предпросмотра видео интегрировали FFmpeg через пакет ffmpeg_kit_flutter_full. Добавили фильтры по длительности, разрешению и битрейту. Это позволило ускорить рендеринг и снизить вероятность перегрева устройства.

Хранение данных реализовали через AWS S3. Каждая история в Tvap story может включать десятки медиафайлов, поэтому мы внедрили систему «умной» подгрузки. Контент загружается только в момент отображения. Такой подход сохраняет оперативную память устройства и не снижает отзывчивость интерфейса даже при больших историях.

Цель проекта была амбициозной — добиться стабильных 60 кадров в секунду даже при работе с текстами объемом до 3 МБ. Для сравнения: роман «Война и мир» Л. Толстого весит примерно 3–4 МБ. При этом приложение должно было оставаться отзывчивым и сохранять плавность интерфейса.

Расчеты показали: при 60 fps на каждый кадр остается всего 16 мс. Но это значение теоретическое. В реальности все это время займут алгоритмы, парсеры и логика редактора, а Flutter просто не успеет отрендерить кадр. И тогда плавной работы не получится.

Мы задали внутренние ориентиры по скорости обработки. Для текстов до 100 КБ — не больше 1 мс на все операции. Для крупных файлов от 3 МБ и выше — 3–5 мс. От этих показателей отталкивались при контроле нагрузки и стабильности работы.

А для того, чтобы понять, сколько ресурсов потребляет именно редактор, а не вся система, проводили замеры с помощью Stopwatch. Анализировали время выполнения каждой операции внутри редактора. Средний результат — менее 100 микросекунд. Это даже не миллисекунда, а десятая ее часть.

За это время редактор успевает:

· отрисовать внутреннюю модель данных (дерево, в котором хранится история текста);

· обработать действия пользователя;

· применить изменения к модели.

Производительность и стабильность стали ключевыми показателями качества Tvap story. Большая часть усилий ушла на оптимизацию архитектуры и редактора, чтобы приложение оставалось быстрым даже при больших объемах данных. Редактор уверенно работает с экстремальными объемами данных — мы проводили краш-тесты на текстах размером 180 МБ. Даже при таких нагрузках приложение сохраняет стабильность и плавность интерфейса на уровне 60 кадров в секунду. Передача данных при хорошем соединении занимает около 10 секунд, без заметных просадок производительности.

Релиз Tvap story в App Store состоялся 12 февраля 2025 года. Сейчас команда собирает аналитику и формирует задачи для следующего этапа развития продукта.

· добавление системы комментариев и лайков;

· создание веб-версии для авторов, которые работают с клавиатуры;

· внедрение монетизации;

· интеграция нейросети, которая поможет авторам при создании историй, сможет генерировать изображения и видео и возьмет на себя модерацию контента.

Проект Tvap story показал, что на Flutter можно создавать продукты уровня enterprise — с кастомной архитектурой, высокой производительностью и стабильной работой даже при экстремальных объемах данных.