Разработка приложений на Flutter

Подробно

Flutter разработка приложений в Кодовой студии - это один код на языке Dart, из которого собираются приложения для iOS и Android, а при необходимости веб-версия и десктоп. Мы проектируем интерфейс, пишем клиентскую часть на Flutter, собираем серверную часть и выпускаем приложение в App Store и RuStore. Главный плюс для заказчика в том, что обе платформы развиваются синхронно: новая функция появляется у всех пользователей в один день, а бюджет не делится на две команды.

Фреймворк подходит не всем продуктам, поэтому на первой встрече сравниваем его с нативом и React Native на примере ваших экранов и функций. Если после разбора окажется, что приложению нужна глубокая работа с системой, так и скажем и предложим натив. Базовое объяснение технологии есть в статье что такое Flutter, а ниже рассказываем, как мы работаем с ним на реальных проектах.

Флаттер: мобильная разработка из единой кодовой базы

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

Код пишут на Dart. Этот язык программирования компилируется в машинный код для мобильного устройства, поэтому приложение запускается быстро и не тормозит на анимациях. Во время разработки работает горячая перезагрузка (hot reload): разработчик меняет код и почти сразу видит результат на экране, без полной пересборки. На практике это заметно ускоряет работу над интерфейсом и правки после показа заказчику.

Единая кодовая база покрывает большую часть приложения: экраны, навигацию, бизнес-логику, работу с сетью и данными. Нативный код нужен там, где требуется специфичная функция системы, которой нет в готовых плагинах: особый режим работы с Bluetooth-оборудованием или виджет на рабочем столе. Такой код пишем на Swift и Kotlin и подключаем к Flutter через платформенные каналы (механизм обмена сообщениями между Dart и нативной частью).

Если заказчику важно, чтобы приложение выглядело по-родному на каждой платформе, во фреймворке есть два набора готовых виджетов: Material в стиле Android и Cupertino в стиле iOS. Можно показывать привычные пользователю диалоги, переключатели и навигацию и при этом держать логику в одном месте. Чаще мы собираем собственную дизайн-систему бренда, а платформенные отличия оставляем там, где они влияют на удобство: жест назад, системные меню, выбор даты.

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

Кроссплатформенная разработка на Flutter

Кроссплатформенная разработка на Flutter отличается от других подходов тем, что фреймворк не использует нативные компоненты интерфейса. React Native, например, пишет логику на JavaScript или TypeScript, а на экран выводит системные кнопки и списки каждой платформы. У Flutter свой рендеринг, поэтому интерфейс совпадает на Android и iOS, а поведение меньше зависит от версии системы.

Для бизнеса это дает три практических эффекта:

• одна команда Flutter-разработчиков вместо двух нативных, меньше расходов на синхронизацию и повторное тестирование одной логики;
• дизайн-система живет в одном месте, изменения сразу видны на обеих платформах;
• две платформы на Flutter обходятся в 60-70 процентов от нативной разработки, а e-commerce приложение выходит за 4-5 месяцев вместо 6-8 у натива.

Есть и цена за удобство. Приложение на Flutter весит больше аналогичного нативного, новые функции iOS и Android доходят до фреймворка с задержкой, а пользователь, привыкший к системным элементам, может заметить, что отдельные детали интерфейса ведут себя чуть иначе. В большинстве продуктов это некритично, но мы проговариваем такие вещи до старта, чтобы решение принималось с открытыми глазами.

Сравнивать стоит и с Kotlin Multiplatform. Там общей делают бизнес-логику, а интерфейс часто остается нативным. Такой подход хорош, когда уже есть Android-приложение на Kotlin и нужно выйти на iOS. Если же продукт строится с нуля и сразу на обе платформы, фреймворк Flutter обычно дает больше общего кода и меньше точек, где команде приходится думать о двух системах одновременно.

Мобильная разработка на Flutter: когда подходит

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

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

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

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

Еще один аргумент - дальнейшее развитие своими силами. Если после запуска заказчик хочет вести продукт собственной командой, передать проект одному-двум специалистам, которые пишут логику на Dart, проще, чем держать отдельно iOS- и Android-разработчиков. Мы пишем документацию по архитектуре, оставляем тесты и проводим передачу проекта, чтобы новая команда не начинала с раскопок чужого кода.

Примеры приложений на Flutter

Среди известных приложений на Flutter: клиент банка Nubank, My BMW для владельцев автомобилей, eBay Motors и маркетплейс Xianyu от Alibaba. Это продукты с большой аудиторией и строгими требованиями к безопасности, и фреймворк в них решает те же задачи, что и натив.

У нас на Flutter собраны два демо-проекта студии. На них удобно посмотреть, как одна кодовая база работает на iOS и Android, еще до старта вашего приложения:

• Грядка, демо сервиса доставки фермерских продуктов. На Flutter написаны два приложения: для покупателя и для курьера. Внутри каталог с остатками по складу, корзина, общая с сайтом, оплата картой и через СБП, промокоды, слоты доставки и курьер на карте. Сервер на Python и Django, сайт и админка на React работают с тем же API.
• Умникум, демо платформы онлайн-школы. Приложение для учеников показывает видеоуроки с конспектами, принимает домашние задания с фото, считает прогресс и напоминает о занятиях. Уроки можно скачать и смотреть без интернета, прогресс синхронизируется с веб-версией.

Другие демо студии, инвестиционное приложение Капиталика и фитнес-приложение Ритмика с поддержкой часов, сделаны нативно на Swift и Kotlin. Там котировки в реальном времени и глубокая работа с системой, поэтому выбрали натив. На первой встрече так же разбираем ваш продукт и говорим прямо, подходит ли ему Flutter.

Разработка на Flutter: инструменты, архитектура, тесты

Разработка на Flutter начинается с настройки окружения. Flutter-разработчик ставит Flutter SDK, в который уже входит Dart, и запускает команду flutter doctor: она проверяет, установлены ли Android Studio, Xcode, эмуляторы и нужные компоненты, и подсказывает, чего не хватает. Писать код удобно в Visual Studio Code или Android Studio, для обеих сред есть официальные плагины с отладкой и горячей перезагрузкой. Сборку под iOS все равно делаем на Mac с Xcode, этого требует платформа.

Проект Flutter в студии устроен так:

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

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

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

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

Веб-разработка на Flutter

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

Для публичных сайтов, которые должны находиться в поиске, веб-разработка на Flutter подходит плохо. Страница рисуется на холсте, поисковики видят ее хуже обычного HTML, а первая загрузка тяжелее. Лендинг, блог и каталог для SEO делаем на классическом веб-стеке, а Flutter оставляем для закрытой части, куда пользователь попадает после входа.

С десктопом та же логика: Flutter собирает приложения для Windows, macOS и Linux. Если сотрудникам нужна программа на рабочем компьютере и приложение на телефоне с одинаковым интерфейсом, это один из самых экономных способов ее получить. Для быстрых экспериментов с кодом есть онлайн-песочница DartPad, которую иногда называют flutter playground: в ней можно показать заказчику работу виджета без установки окружения.