Российские компании находятся в активном поиске путей для продвижения своих приложений после закрытия доступа в сторы, и сейчас вариантов много: десктопное приложение вкупе с мобильным и браузерным на кроссплатформенных фреймворках, Android application package (APK) на сайте компании или progressive web application (PWA). Быстрая и недорогая разработка в приоритете, поэтому в этой статье разберем одну из самых удобных кроссплатформ для бизнеса — Flutter — и расскажем, как может дать буст для бизнеса, расширить клиентскую базу и облегчить клиентам доступ к продукту.

С момента релиза в 2019 году Flutter стал полноценной кроссплатформой для бизнеса. Его последняя версия 3.13 дает максимум возможностей: разработка приложения для 6 платформ на одной кодовой базе, уникальный дизайн с классными фичами, доступ к нативным возможностям и экономия бюджета на разработку до 60%. Разберемся со всем по порядку.

Немного истории: от iOS и Android к десктопному приложению

Google презентовал Flutter в 2017 году как возможность создавать приложения для бизнеса на iOS и Android, а сейчас функционал кроссплатформы расширился — например, стало доступно создание десктопных приложений. Мы начали работать с Flutter в 2019 году и за несколько лет реализовали на нём более 25 проектов в разных сферах: для банка, ритейла, корпораций и медиа. 

Кроссплатформу поддерживает большое сообщество разработчиков по всему миру, а команда Surf активно развивает его в России — мы записываем подкасты, пишем технические статьи и создаем собственные стандарты архитектуры в открытых репозиториях.

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

Преимущества Flutter для бизнеса

Кроссплатформенный фреймворк Flutter — это набор инструментов, который позволяет создать одно приложение сразу для 6 платформ: iOS, Android, web, Windows, MacOS и Linux. В отличие от разработки нативного приложения, вы можете создать сразу мобильное, веб- и десктопное приложения на разных устройствах — и таким образом облегчить доступ клиентов к своему продукту. 

Основные плюсы Flutter:

• Экономичность. Бизнес тратит меньше времени и денег на разработку, потому что Flutter-разработчик создаёт одну кодовую базу сразу для всех платформ. Финальная стоимость такой разработки составляет на 40–60% меньше, чем создание отдельных нативных приложений. При этом пользователи не заметят никакой разницы, с точки зрения функций и внешнего вида. При разработке приложения для крупнейшей аптечной сети Ригла мы сэкономили 40% бюджета компании по сравнению со стоимостью создания нативного приложения и создали 6 приложений на одной кодовой базе, но с уникальными дизайнами, для 3 брендов компании. 
• Time-to-market короче. Для запуска Flutter-приложения потребуется на 60% меньше времени, чем на запуск нативного, что позволяет вывести цифровой продукт на рынок гораздо быстрее. 

Один из сложных и ярких примеров быстрого выпуска продукта на рынок — разработка не только приложения, а целой экосистемы для маркетплейса автоуслуг IZZI. В рамках проекта всего за 7 месяцев мы создали единый сервис для b2b-сферы и мобильное приложение IZZI Drive для b2c-клиентов компании, а также интегрировали эти продукты друг с другом и предложили дизайнерские решения.

• Нет ограничений в дизайне. Это важный пункт для любого бизнеса, который дорожит своей уникальностью. Flutter позволяет реализовать любой дизайн, включая сложную анимацию, благодаря новому графическому движку Impeller и поддержке Material Design, о которых расскажем подробнее чуть ниже.
• Высокое качество и загрузка изображений. Новый API асинхронно декодирует изображения из главного потока с помощью встроенных в браузер кодеков изображений. Такое решение ускоряет декодирование изображений в 2 раза и не блокирует главный поток. То есть никаких лагов при загрузке изображений. Сегодня эту технологию поддерживает большинство браузеров на базе Chromium (Chrome, Edge, Opera, Samsung Browser).
• Безопасность. Код Flutter-приложения преобразуется в нативный, который нельзя восстановить с помощью реверс-инжиниринга. Благодаря этому приложение соответствует всем требованиям безопасности. Для банков это особенно важно: мы всегда комплексно подходим к каждому проекту, как например, при создании b2b-приложения для Росбанка и b2c-решения для СМП Банка.
• Удобный процесс разработки. Hot Reload — фирменная фича Flutter, которая позволяет вносить изменения в код на разных платформах и видеть изменения в реальном времени, без необходимости полного перезапуска приложения.
• Высокая производительность и стабильность. Flutter обеспечивает стабильную производительность на уровне 60–120 кадров в секунду (FPS), что имеет большое значение для обучающих и игровых приложений, требующих быстрого отклика и плавной работы. Например, при создании платформы видеостриминга The Hole на Flutter нам удалось добиться плавного воспроизведения и перемотки Full HD видео даже при низкой скорости соединения.

Теперь к этим основным характеристикам Flutter добавились новые фичи версии 3.13, что делает кроссплатформу еще удобнее.

Что изменилось с выходом Flutter 3.13

Более совершенный движок и производительность

Около года назад Flutter перешел на движок Impeller — технология улучшила производительность и сделала анимацию и рендеринг в iOS значительно лучше. Благодаря оптимизации, Impeller демонстрирует более высокие средние показатели в benchmark-тестах и меньшую задержку в iOS-приложениях. 

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

Уже сейчас теперь можно протестировать работу Impeller на MacOS, а к концу года — на Android.

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

Улучшения в Material Design 

Material Design — это дизайн-система, разработанная Google, которая позволяет унифицировать дизайн на всех устройствах, а не разрабатывать для каждой платформы свой. Таким образом вы экономите время и средства для разработки и при этом можете реализовать практически любые задумки по дизайну. 

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

• Распознавание символов в TextField. Благодаря этому приложение распознает символы с помощью камеры устройства и пользователь вставляет их в поле ввода.
• Адаптивный диалог AlertDialog для корректного отображения приложения на всех платформах;
• Больше опций кастомизации виджетов (добавление подсказок, отображение ошибок) и поддержка жестов.

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

Что это значит? Material You — новая версия дизайн-языка Material Design, которая используется при разработки дизайна мобильных приложений. Возможность поддержки самой актуальной версии означает, что как мобильное, так и десктопное приложения теперь будут выглядеть современно, и UX/UI дизайнеры  смогут легко реализовать самые модные «фишки».

Упростился контроль жизненного цикла веб-приложений

Появилось новое API жизненного цикла для веб-приложений и добавился класс AppLifecycleListener, который отслеживает изменения в жизненном цикле приложения и отвечает на запросы о выходе из приложения. Это помогает делать качественнее сам продукт, улучшает UX конечного пользователя. 

Что это значит? Теперь мы можем визуализировать процесс загрузки веб-приложения до момента его запуска. Пользователь больше не будет смотреть на белый экран. Новая возможность даёт больше контроля над начальной загрузкой веб-приложения с HTML-страницы на стороне сервера. К тому же, она упрощает анализ производительности приложения в Lighthouse — инструменте для измерения качества веб-страниц.

Улучшена поддержка складных устройств

Появилось новое API жизненного цикла для веб-приложений. Это помогает делать качественнее сам продукт, улучшает UX конечного пользователя. 

Что это значит? Теперь мы можем визуализировать процесс загрузки веб-приложения до момента его запуска. Пользователь больше не будет смотреть на белый экран. Новая возможность даёт больше контроля над начальной загрузкой веб-приложения с HTML-страницы на стороне сервера. К тому же, она упрощает анализ производительности приложения в Lighthouse — инструменте для измерения качества веб-страниц.

Появилась поддержка складных устройств

 Flutter уже на протяжении нескольких релизов поддерживает создание приложений для мобильных раскладушек. В версии 3.13 разработчики доработали возможности фреймфорка и добавили новый API, для доступа к дисплеям складных устройств с помощью getter-метода FlutterView.display, что позволяет точнее с ними взаимодействовать.

Что это значит? Даже на самых новых моделях телефонов-раскладушек приложение будет работать и отображаться корректно.

Релизы для iOS и Android

Для iOS: Исправлены искажения при поворотах экрана, что делало его не похожим на нативный в iOS-приложениях. Новый релиз сглаживает такие искажения.

Для Android: появилась поддержка Android 14 (API level 34), проработка нескольких фич пока в процессе, но в целом это уже полностью рабочая версия.

Поддержка игр

Теперь разработка казуальных игр на Flutter стала еще проще. Появились игровой шаблон, туториалы, документацию, пространство в сообществе и кредиты GCP/Firebase/Ad — все для того, чтобы вовлекать пользователя как в мобильном, так и в десктопном приложении. 

Например, мы разрабатывали геймификацию для HR-приложения, где сотрудники компании могут в игровой форме зарабатывать и тратить баллы на книги и другие полезные для профессионального развития товары. А в приложении для крипто-социальной сети Main для большей вовлеченности пользователей создали систему звездочек для повышения рейтинга: чем выше рейтинг, тем красивее звездочка.

Всё сразу: мобильное, веб- и десктопное приложение на Flutter

Разработка на Flutter позволяет сократить сроки и стоимость разработки мобильного приложения до 60% — все 3 версии вашего цифрового продукта (мобильная, веб- и десктопная) создаются из одной базы кода с незначительными изменениями. Это подтверждает наш кейс с концептом необанка. Например, с помощью кроссплатформенного фреймворка мы реализовали идентичное нативному банковское приложение для разных устройств с привычными и удобными для пользователя функциями:

• В разделе «Карты» — видны открытые карты с общим и разделённым балансом.
• «Счета и «Цели» — имеют привычную функциональность «копилки» и доступных счетов: дебетового и кредитного.
• «История» — отображает траты каждого месяца по категориям. 
• «Автоплатежи», переводы по номеру телефона и оплата по QR-коду — тоже легко реализуемая функциональность.

Зачем создавать не только мобильное и веб-, но и десктопное приложение на Flutter?

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

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

• простота нативных интеграций; 
• впечатляющие библиотеки UI-компонентов (Windows, macOS);
• готовые решения для управления мультиоконностью (window_manager);
• утилиты для сборки десктопных артефактов (msix).

Что это значит для бизнеса? Команда разработчиков Flutter не просто обеспечила возможность запустить мобильное приложение на десктопе, как это уже умеют делать Windows 11 и macOS — она создала настоящее десктопное приложение, удобное для пользователей. Теперь им не нужно скачивать его из сторов, и при этом не страдает качество продукта или удобство использования, что важно для компаний, оказавшихся под санкциями.

Почему именно Flutter: итоги

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

• Не нужно собирать 3+ разные команды под каждую платформу. Достаточно иметь в одной команде несколько разработчиков с компетенциями в этих платформах. Они будут помогать друг другу по платформенным задачам, а общий пул унифицированных задач делить поровну.
• Проект на Flutter удобно поддерживать — все проблемы решаются раз и навсегда через единый код. Не нужно передавать информацию обо всех правках по всем платформам и платить нескольким командам разработчиков.
• Код будет стабильным — он тестируется один раз и под все платформы, то есть все баги правятся одновременно на всех платформах.
• Проект выйдет на рынок на 30-60% быстрее и обойдётся на столько же дешевле.

Важно понимать, что часть кодовой базы проекта будет унифицирована (80–95%, в зависимости от специфики проекта), а адаптации будут необходимы — как по платформенным фичам, так и по UX. Но это будут именно адаптации, а не переписывание приложения с нуля. Именно поэтому мы в Surf постоянно следим за развитием кроссплатформы и активно участвуем в её развитии. 

«У нас есть внутренний проект, на котором мы пробуем всё то, к чему наши клиенты будут готовы лишь «завтра». Да, это проект на Flutter Web.»

Евгений Сатуров, Head of Flutter в Surf

Развитие продукта зависит не только от технологии, но и от опыта команды разработчиков. Мы в Surf создаём мобильные приложения более 12 лет, а на Flutter — уже больше 4 лет, прошли сертификацию в Google и поддерживаем развитие самой кроссплатформы. 

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