Что такое Flutter

Что такое Flutter, если коротко: это кроссплатформенный фреймворк с открытым кодом, на котором из одной кодовой базы собирают приложения для iOS, Android, веба и десктопа. Код пишут на языке Dart, а интерфейс Flutter рисует сам, своим графическим движком, поэтому экраны выглядят одинаково на любом устройстве.

Первая стабильная версия вышла в конце 2018 года. С тех пор Flutter стал одним из самых заметных инструментов кроссплатформенной разработки вместе с React Native. Для бизнеса он интересен простой арифметикой: один код вместо двух, одна команда вместо двух, релиз на обе платформы в один день. Для разработчика - быстрым циклом правок и богатым набором готовых компонентов.

Что такое Flutter в программировании?

В программировании Flutter относят к UI-фреймворкам (UI - пользовательский интерфейс, то, что человек видит на экране и нажимает). Он решает одну задачу: описать экраны и логику один раз и запустить приложение на разных платформах. Внутри три слоя:

• Язык Dart. Язык программирования Dart появился в 2011 году, а широкую известность получил вместе с Flutter. Он объектно-ориентированный, со строгой типизацией и null safety (защитой от ошибок с пустыми значениями). Синтаксис знаком тем, кто писал на Java, Kotlin, C# или TypeScript.
• Фреймворк. Библиотека виджетов, анимаций, навигации и обработки жестов, написанная на Dart.
• Движок. Написан на C++, отвечает за отрисовку, работу с текстом и связь с операционной системой. Основной рендер сейчас Impeller, до него использовался Skia.

При сборке релиза код на Dart компилируется заранее (AOT) в машинный код процессора. Поэтому приложение не зависит от интерпретатора на телефоне и показывает высокую производительность в типовых сценариях: списках, анимациях, формах. Во время разработки тот же код работает в режиме JIT, и отсюда главное удобство связки Flutter и Dart - hot reload.

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

Отличие от нативного приложения - в том, как Flutter общается с системой. Для камеры, геолокации, платежей и push-уведомлений он использует плагины: пакет на Dart плюс код на Swift и Kotlin внутри. Для популярных задач плагины уже есть в каталоге pub.dev, редкие функции разработчик пишет сам через platform channels (канал обмена данными между Dart и нативным кодом).

Flutter UI

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

Из коробки есть два набора компонентов:

• Material - компоненты в стиле Android: кнопки, карточки, нижняя навигация, AppBar (верхняя панель экрана с заголовком и кнопками действий, обычно внутри каркаса Scaffold).
• Cupertino - компоненты в стиле iOS: переключатели, списки настроек, навигационная панель с крупным заголовком.

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

Для управления состоянием (какие данные сейчас показывает экран и как он реагирует на их изменение) используют библиотеки Provider, Riverpod или Bloc. Выбор зависит от размера проекта. На паре простых экранов хватает встроенного setState, в большом продукте без отдельной библиотеки код быстро превращается в клубок.

Flutter приложение

Flutter приложение из одной кодовой базы собирается под шесть платформ: Android, iOS, веб, Windows, macOS и Linux. На практике Flutter используют в первую очередь для мобильных приложений, а веб и десктоп добавляют к основной версии, когда это нужно бизнесу.

Где мобильное приложение на Flutter подходит лучше всего:

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

Главное преимущество Flutter - экономия на второй платформе. Приложение на Flutter для двух платформ обходится в 60-70 процентов от нативной разработки под iOS и Android. Для интернет-магазина рыночные сроки такие: 6-8 месяцев на нативе против 4-5 месяцев на Flutter. Прикинуть объем под свой список экранов можно в калькуляторе.

Где Flutter проигрывает нативу:

• продукты, завязанные на свежие функции ОС в день их выхода: плагины обновляются с задержкой;
• тяжелая работа с железом: фоновая обработка звука, сложные сценарии Bluetooth, AR;
• размер установочного файла больше, чем у аналогичного нативного, потому что в сборку входит движок;
• веб-приложение на Flutter рисуется на canvas, поисковики индексируют его хуже обычного сайта, поэтому для SEO-проектов Flutter web не подходит.

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

Если ваша задача совпадает с первым списком, Flutter-разработка приложений даст ту же функциональность дешевле и быстрее. Если со вторым, стоит считать натив или гибрид: основное приложение на Flutter, отдельные модули на Swift и Kotlin.

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

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

В нашей студии на Flutter сделаны два демо-проекта:

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

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

Flutter онлайн

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

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

Flutter с нуля: с чего начать

Путь новичка обычно такой:

1. Освоить основы программирования на Dart: переменные, классы, асинхронность (async и await), коллекции. Опыт на Java, Kotlin или C# сильно ускоряет этот шаг.
2. Пройти официальные codelabs в документации Flutter и собрать пару учебных экранов.
3. Разобраться с навигацией, запросами к серверу и управлением состоянием.
4. Написать небольшое приложение от начала до конца и запустить его на своем телефоне.

Отдельная тема для тех, кто пришел из C и C++. Движок Flutter написан на C++, а из Dart можно вызывать C-библиотеки напрямую через dart:ffi. Так в проект подключают готовый код обработки изображений, криптографии или звука без переписывания.

Сообщество разработчиков у Flutter большое: тысячи пакетов на pub.dev, русскоязычные чаты, конференции и митапы. Ответ на типовой вопрос обычно находится за несколько минут, а баги в популярных плагинах чинят быстро.

Как сделать приложение на флаттер?

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

1. Аналитика. Собираем сценарии, роли пользователей, список экранов и интеграций. Сразу отмечаем функции устройства, для которых понадобится нативный код.
2. Дизайн. Рисуем интерфейс в Figma. Для Flutter достаточно одного макета на обе платформы с учетом мелких отличий вроде жеста назад в iOS.
3. Архитектура. Выбираем подход к состоянию, структуру проекта, плагины. Проверяем, что каждый плагин поддерживается и обновляется под актуальную версию Flutter.
4. Разработка. Пишем экраны и логику, подключаем сервер, платежи, аналитику, push-уведомления.
5. Тестирование. Проверяем на реальных устройствах Android и iOS разных размеров и версий ОС. Тесты виджетов и интеграционные тесты Flutter поддерживает штатно.
6. Публикация. Готовим сборки и карточки для App Store, RuStore и других магазинов.
7. Поддержка. Обновляем Flutter и зависимости, выпускаем новые функции.

Структура бюджета на рынке выглядит так: аналитика и ТЗ 10-15 процентов, дизайн 15-25, разработка 50-60, тестирование 10-15, управление проектом 10-15. На Flutter экономия приходится в основном на разработку и тестирование, аналитика и дизайн стоят примерно столько же, сколько на нативе.

Как создать приложение на Flutter?

Технически запустить приложение на Flutter можно за один вечер. Порядок для разработчика:

1. Скачать Flutter SDK с официального сайта и добавить его в PATH. Проверить окружение командой flutter doctor: она покажет, чего не хватает.
2. Поставить редактор. Подходят Visual Studio Code с расширениями Flutter и Dart или Android Studio с плагином Flutter. Полная Visual Studio понадобится только для сборки десктопной версии под Windows, путать ее со Studio Code не стоит.
3. Для сборки под Android установить Android SDK (он ставится вместе с Android Studio) и создать эмулятор. Для iOS нужен компьютер на macOS с Xcode.
4. Создать проект командой flutter create my_app. Получится шаблон со счетчиком нажатий.
5. Запустить командой flutter run или кнопкой в редакторе. Поменять текст в коде, сохранить файл и посмотреть, как горячая перезагрузка обновила экран.
6. Собрать релиз: flutter build appbundle для Android, flutter build ipa для iOS.

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