Flutter flow что это
Обзор FlutterFlow — no-code-конструктора нативных приложений для iOS и Android
Разбираемся, как работает и кому подходит FlutterFlow — зерокодинговый конструктор приложений для Android и iOS.
Любому мобильному приложению нужен фронтенд, бэкенд, база данных, внутренняя логика и интеграции со сторонними сервисами — в традиционной разработке это реализуют целые команды. Они пишут код, компилируют его, тестируют приложения и размещают их в маркетах. На запуск продукта уходят месяцы и миллионы рублей.
Но есть инструменты, которые помогают разрабатывать приложения в разы дешевле, быстрее и без кода — это no-code-конструкторы. FlutterFlow как раз один из них.
Что такое FlutterFlow
FlutterFlow — это зерокодинговый конструктор мобильных приложений для Android и iOS. От других сервисов он отличается тем, что на выходе выдает код на фреймворке Flutter от Google. Нужно собрать приложение в визуальном редакторе, скачать его исходный код, скомпилировать файл и получить сборки, которые можно загрузить в App Store и Google Play. Для этого не обязательно уметь программировать.
Конструктор работает в браузере как Figma. У него больше 50 000 пользователей
Создатели FlutterFlow говорят, что сделать приложение в их сервисе можно в 10 раз быстрее, чем с программистами, потому что вы сразу делаете проект под iOS и Android.
В визуальном редакторе можно перетаскивать и размещать элементы на нужных местах, FlutterFlow поддерживает базу данных Firebase, внешние API и другие функцииВозможности FlutterFlow
Есть шаблоны приложений и элементов. В конструкторе доступны шаблоны мессенджеров, планировщиков задач, приложений для здоровья и соцсетей. В наличии шаблоны виджетов и целых экранов — например, корзины и авторизации.
При создании проекта FlutterFlow предлагает собрать приложение с нуля или выбрать шаблон
Бесплатная авторизация по номеру телефона. «Из коробки» FlutterFlow позволяет бесплатно добавить вход по номеру мобильного. Ограничение — 10 000 авторизаций в месяц. При этом у конкурентов одна СМС стоит 2–3 рубля.
В базу данных Firebase легко добавить новое поле и задать его тип — например, текст, изображение или дата
Легко подключить внешние API. Приложение нетрудно связать с мессенджерами, сервисами рассылок и тысячами других инструментов. Команда конструктора опубликовала видеоурок о работе с API.
Проект легко тестировать. Не обязательно проверять сборку сразу на Android или iOS — проверить UI и навигацию можно прямо в вебе без эмуляторов.
При проверке приложения можно выбрать разные модели устройств, чтобы узнать, как приложение будет работать на девайсах Android и iOS
Доступен исходный код. При сборке проекта код можно выгружать, редактировать и автоматически экспортировать в GitHub. Каждая новая версия приложения — это отдельная ветка кода в GitHub.
Сколько стоит FlutterFlow
Бесплатный план подойдет, чтобы построить и протестировать свое приложение без настоящих данных. Его возможности:
В профессиональном плане доступны связки со сторонними сервисами через API, интеграция с GitHub, легко подключить Codemagic — систему для тестирования, контроля версий и сборки приложений для Android и iOS (с ней MacBook не понадобится). Там также есть визуальный редактор, чтобы напрямую редактировать данные в базе Firestore.
Чем FlutterFlow отличается от Adalo
Кейсы приложений на FlutterFlow
Создатели FlutterFlow говорят, что на нем легко построить все, что угодно — интернет-магазины, медицинские и банковские приложения, мессенджеры и другие проекты.
Вот примеры приложений на FlutterFlow:
Фриланс-биржа для зерокодеров. Сергей Горелов, эксперт, который помог редакции «Зерокодера» сделать этот обзор, собрал на FlutterFlow мобильное приложение для iOS и Android. В нем можно размещать и выполнять заказы на no-code-разработку. В проекте реализован вход и регистрация по номеру мобильного, авторизация через аккаунты Facebook, Apple ID и Google. Подробнее о бирже Сергей рассказал в своей статье на vc.ru.
Чат для айтишников. На сайте FlutterFlow есть демо чата для IT-специалистов. В нем реализована авторизация по email и гостевой вход. На основе этого шаблона можно за считанные минуты добавить в свое приложение функцию чата.
Где освоить FlutterFlow
У FlutterFlow есть подробная документация, где рассказано, как работать с визуальным редактором и как создавать проекты и страницы. Есть инструкции по работе с виджетами, базой данных и сторонними API. В разделе FAQ рассказывают, как решить самые частые проблемы с FlutterFlow.
На официальном YouTube-канале инструмента есть 40 видеоуроков о том, как внедрять кастомный код, выкладывать приложения в App Store, добавлять монетизацию Google AdMob, внедрять авторизацию пользователей и многое другое.
Задать вопросы по FlutterFlow и пообщаться с экспертами можно в русскоязычном сообществе.
Вывод — кому подойдет FlutterFlow
FlutterFlow — продвинутый конструктор приложений, который подойдет тем, кому нравится традиционная разработка. Кроме визуального редактора, у него есть выгрузка исходного кода и системы контроля версий. Это открывает больше возможностей для кастомизации приложений: у FlutterFlow нет каких-либо ограничений.
Чтобы научиться за несколько недель воплощать идеи приложений в жизнь без огромных бюджетов, приходи осваивать Adalo и Glide на курсе «Зерокодер мобильных приложений».
Build Native iOS and Android Mobile Apps Without Code
Create beautiful screens with our Drag-and-Drop UI Builder
If you can imagine it, you can build it with FlutterFlow. Create stunning and customizable designs with our easy to use UI Builder.
Save time with UI templates & components
We offer more than 50+ professionally designed screen templates, so you never need to start from scratch.
Choose from more than 40 pre-built widgets to add app functionality (e.g. drop-downs and lists) as well as 3rd Party Integrations (e.g. Algolia, Google AdMob, Braintree).
Easily set up and add live data to your app
Setting up your data infrastructure, adding user authentication, and connecting to live data is fast and simple with Firebase.
Connect to any other 3rd party API using our API integration tool.
Own Your Creation, Download Your Source Code
As you build in FlutterFlow, we automatically create the code for your mobile app. We follow Flutter best practices, so our code is clean and easy to read.
You can view this code in your browser or download it.
You can also connect to GitHub to easily track and sync any code changes.
Gather Feedback and Iterate Quickly
User feedback is critical in app development.
Preview Mode: Users can interact with a prototype of your app. This is great for testing UI design and navigation.
Other Features
Additional features to help you build awesome mobile apps with FlutterFlow.
Simultaneously create iOS and Android apps
Using the power of Flutter, we create one codebase for both platforms.
Advanced UI/UX tools to speed up your workflow
Animations and Lottie integration can enhance your design.
Fewer issues with guided troubleshooting
Real-time feedback and error corrections help you avoid and fix potential issues.
Что такое FlutterFlow? Визуальный конструктор приложений для Flutter °
Интервью FlutterFlow, сторонний конструктор визуальных приложений для фреймворка Flutter, теперь имеет настраиваемые функции для добавления кода Dart, но разработчики могут по-прежнему находить это слишком ограничивающим.
Конструкторы визуальных приложений с низким кодом не намного проще, чем FlutterFlow, браузерная среда для создания мобильных приложений с Flutter.
Не нужно ничего устанавливать: пользователи запускают новый проект в браузере и создают пользовательский интерфейс путем перетаскивания, используя обнадеживающие короткие значки и компоненты, начиная от простых списков и кнопок до AudioPlayer, WebView, VideoPlayer или GoogleMap. Элементы макета определяют расположение компонентов, включая контейнеры, строки, столбцы, сетки, вкладки и карточки.
Чтобы оживить пользовательский интерфейс, нужно выбрать компонент и установить его свойства, включая такие параметры макета, как цвета, шрифты и отступы; такие действия, как навигация или вызовы API, соединения с запросами к базе данных и анимация, чтобы добавить немного шика.
Элементы управления могут быть привязаны к данным для отображения результатов запроса, включая аутентификацию пользователя для управления доступом к данным. Режим предварительного просмотра примерно показывает, как приложение будет работать во время выполнения, хотя в настоящее время без данных в реальном времени, без аутентификации или вызовов API. В режиме Run выполняется полная компиляция, но подготовка занимает несколько минут.
FlutterFlow создает мобильные приложения для Android и iOS
Основным вариантом для подключения к данным является Google Firestore, часть его платформы Firebase, хотя возможность выполнять вызовы API, REST GET или POST для любой конечной точки означает, что код сервера может вызывать другие источники по выбору разработчика, но за пределами Среда FlutterFlow.
После завершения проект можно запустить в браузере и развернуть в iOS App Store или загрузить как APK для Android. Также можно загрузить код, сгенерированный FlutterFlow, и импортировать его в другую среду для завершения, хотя это односторонний процесс и нет средств для импорта измененного кода обратно в среду FlutterFlow.
FlutterFlow был запущен в мае, но в этом месяце появилась важная новая функция: пользовательские функции. Это позволяет разработчикам добавлять в проект код Dart (язык, используемый Flutter), определяя функции, которые могут принимать аргументы, полученные из данных, привязанных к элементу управления.
Цены бесплатны для тестирования с предварительным просмотром в браузере; 30 долларов в месяц за дополнительную возможность загрузки кода и APK-файлов; и 70 долларов в месяц на добавление пользовательских API, интеграцию с GitHub, которая обновляет репозиторий при изменении кода, развертывание iOS и управление контентом Firebase. Одна кодовая база поддерживает как iOS, так и Android.
Если FlutterFlow кажется похожим на Google, то это не только потому, что Flutter — это проект Google, но и потому, что соучредителями FlutterFlow являются бывшие инженеры Google, Абель Менгисту и Алекс Гривз, хотя и не из команды Flutter.
«Мы ушли, чтобы основать компанию, мы собирались создать механизм рекомендаций ИИ для совершенно другого пространства», — говорит Менгисту. Рег. «Мы почувствовали, что сделали сложную часть, и затем мы попытались создать приложение прямо перед ней». Именно тогда они исследовали Flutter и пришли к выводу, что, хотя он и превосходен, ему не хватало простого в использовании визуального дизайнера.
«Получив дизайн от нашего дизайнера, мы потратили много времени, просто пытаясь усовершенствовать код, чтобы он соответствовал дизайну», — говорит Менгисту. «Код не казался самым быстрым способом сделать это. Это было первоначальной мотивацией».
Они начали разговаривать с потенциальными пользователями и обнаружили, что у многих из них есть общие требования к потокам, такие как вход в систему или другие общие шаблоны. «Это одна и та же логика, реализуемая снова и снова. Поэтому мы подумали, что иметь сквозной опыт для этих общих потоков должно быть легко. Попытка поднять уровень абстракции выше, чем такие концепции программирования, как условные выражения и функции, поток, который вы можно перетаскивать и добавлять в свое приложение «.
Хотя абстракция общих шаблонов хороша, ничто не может заменить мощь пользовательского кода. До введения пользовательских функций в этом месяце основная идея добавления кода заключалась в репозитории GitHub, который FlutterFlow постоянно обновляет с помощью генерируемого кода. «Он идет в отдельную ветку, чтобы не конфликтовать с другим кодом». Они могут объединить его, и если вы добавили какой-то код, например, для нажатия кнопки, git merge справится с этим нормально », — говорит Менгисту.
Среда FlutterFlow предназначена исключительно для разработки приложений, а не для размещения специальных сервисов. «Мы не занимаемся хостингом, потому что думаем, что Firebase действительно хорошо с этим справляется», — говорит нам Менгисту. В будущем есть планы по интеграции с другими сервисами, но «сейчас мы сосредоточены на том, чтобы максимально эффективно использовать эти ранние наборы функций».
Как FlutterFlow может конкурировать с другими предложениями с низким кодом от облачных гигантов, такими как Microsoft Power Platform, Google AppSheet или Amazon Honeycode? «Я думаю, что они больше сосредоточены на корпоративном пространстве», — говорит Менгисту. «Многие из получаемых нами пользователей не являются пользователями этих платформ. Существующие инструменты для них не работали».
Какую же нишу заполняет FlutterFlow? «Ежегодно сотни тысяч приложений разрабатываются и отправляются в магазины приложений. Power Apps, например, с Microsoft очень нацелены на внутренние организационные подразделения. Мы видели много пользователей, которые хотят создавать приложения намного быстрее».
Какие приложения создают пользователи FlutterFlow? «Такие вещи, как образовательные приложения, у нас также была компания, которая работала над сайтами вакцинации COVID. Для некоммерческих организаций мы предоставляем бесплатный доступ. Мы также видели, как люди создают приложения для сообщества. Создание приложений очень дорогое, средняя стоимость — я считаю, что это 100 000 долл. Так что, если вы хотите приложение для местного сообщества, его разработка слишком дорога, но мы можем значительно снизить стоимость или повысить производительность », — говорит Менгисту.
Важной особенностью, как Microsoft обнаружила несколько десятилетий назад с Visual Basic, будет возможность для третьих сторон создавать компоненты, которые другие могут включать в приложения. Это запланировано для FlutterFlow? «Это определенно то, что мы хотим реализовать. Мне сложно предсказать, когда именно. Вы уже можете создавать компоненты внутри FlutterFlow, которые можно легко использовать повторно, но чтобы иметь что-то, что работает во всех приложениях, открывает множество возможностей».
Функции добавляются относительно быстро. С июня команда добавила аудиокомпонент, визуальные переходы, компонент PageView, аутентификацию телефона с помощью Firebase, Search и Google Maps, поддержку новых размеров устройств, управление командой разработчиков, платежи через PayPal, Google Pay и Apple Pay, условный виджет. видимость, контроль переполнения текста, пользовательские функции кода и проверка пользовательских функций кода.
Разработка пользовательской функции во FlutterFlow
В то же время дыры в платформе легко проделывать. Например, редактор кода для пользовательских функций груб, а связь с Firebase ограничивает. В контексте предприятия система выиграет от соединителей с ключевыми платформами, такими как системы CRM, а также с другими менеджерами баз данных. FlutterFlow, по сравнению с IDE, такой как Android Studio, Xcode, Visual Studio или Visual Studio Code, кажется ограниченным и ограниченным, а режим Run мучительно медленным. Односторонний экспорт кода является серьезным раздражением для тех, кто привык к инструментам, позволяющим разработчикам плавно переключаться между кодом и визуальной разработкой.
Теперь задача состоит в том, чтобы улучшить функциональность, не теряя при этом простоты использования, что является основным достоинством FlutterFlow. ®
📱 Flutter, который не смог: провал кроссплатформенного решения
furry.cat
Впервые я погрузился в мир разработки мобильных приложений около десяти лет назад. Я только что купил свой первый iPhone (3GS), и мне было любопытно сделать что-нибудь для этого чудесного маленького устройства (статья Георга фон дер Ховена публикуется в переводе – прим. ред.).
Сначала я написал стандартное веб-приложение с использованием библиотеки jQTouch и завернул его в контейнер PhoneGap для iOS. После запуска мой проект очень быстро попал в список рекомендованных приложений Apple в медицинской категории. Кажется, мне удалось сделать что-то хорошее.
Flutter: Святой Грааль для кросс-платформенных приложений?
Когда я только принял решение наконец создать Android-версию проекта, встал логичный вопрос – как это сделать. Писать нативное приложение или использовать кросс-платформенные решения? Ionic c React’ом или Vue? Или, может быть, новый модный Flutter вокруг которого сейчас много хайпа?
Поразительно, но сначала все шло очень хорошо. Я ничего не знал о Dart или принципах проектирования пользовательского интерфейса Flutter (пришедших из iOS Swift и XCode Interface Designer), но почти за одну неделю смог запустить проект на Android и iOS.
Когда дело дошло до тестирования, я столкнулся с очень странным поведением. Во время загрузки главы электронной книги отображается спиннер. Как только данные загружены и визуализированы, я заменяю спиннер на WebView. Это очень просто, и в 99% случаев все было нормально. Но иногда все зависало на спиннере. Очевидно, это не то поведение, которое вы ожидаете от приложения для чрезвычайных ситуаций.
Так оставлять было нельзя, поэтому я начал искать альтернативные подходы. Я решил отказаться от запросов через HTTPServer, при первом запуске копировать содержимое книги в каталог документов и открывать HTML прямо в WebView используя протокол file://.
После нескольких тестов и рефакторинга это решение казалось вполне жизнеспособным. До тех пор, пока некоторые ссылки в книге не стали ломаться на физическом устройстве iOS. При этом на Android и в эмуляторе iOS все работало нормально. Оказывается, я нашел еще один баг – в этот раз в пакете Flutter WebView. Я отправил отчет, который быстро был подтвержден. Однако обе ошибки все еще не исправлены (по состоянию на февраль 2021 года).
Ад зависимостей
Модули HTTPServer и WebView – это две самые важные зависимости моего проекта. Без одного или другого мое приложение просто не будет работать. После некоторого опыта работы с iOS и CocoaPods я смотрю на каждую зависимость как на технический долг. Когда вы заимствуете чей-то код и полагаетесь на него, возможно, вам однажды придется заплатить за это.
Я был крайне удивлен, что эти модули получают так мало любви и внимания от разработчиков Flutter. Вероятно, нынешняя команда Google недостаточно велика, чтобы поддерживать и развивать этот проект (8200+ незакрытых ишьюс на Github), либо их приоритеты больше его не включают.
Учитывая эти соображения, давайте взглянем на зависимости моего приложения Flutter и нативной версии проекта на Swift.
Нативное iOS приложение (Swift)
Ничего себе! Для чего мне нужно так много пакетов?
Так как мой проект – это не просто электронная книга, я добавил в него некоторые дополнительные фичи и сервисы, например:
Для каждой фичи требуется взаимодействие с нативным SDK платформы: геолокацией, геокодированием или выполнением вызовов. Также требуется предотвращать уход в спящий режим, запрашивать у пользователя оценку, открывать карту, делиться контентом и делать другие вещи, которые делают все приличные приложения.
Таким образом, ваше приложение Flutter зависит от бесчисленных внешних библиотек, которые обеспечивают функциональность нативных приложений. И вы не знаете, кто и как их разрабатывает, какие у них планы, ограничения и мотивация. Каждая из них увеличивает технический долг вашего приложения.
Кроссплатформенность добавляет сложности
Если вы хотите свести технический долг к минимуму, придется написать 100% кода вашего приложения самостоятельно и использовать только нативные SDK для доступа к возможностям устройства. Конечно это практически невозможно. Поэтому, по крайней мере, тщательно выбирайте сторонние библиотеки, которые вы добавляете к вашему техническому долгу.
К счастью, моих навыков было достаточно, чтобы быстро найти эту ошибку, пофиксить ее и даже отправить патч владельцу репозитория. Но я смог это сделать только потому, что библиотека была написана на том же языке, что и мое приложение – на языке, который я хорошо знаю.
Если сторонняя библиотека написала на знакомом вам языке, вы вполне можете жить с этим долгом. Но каждое кросс-платформенное решение добавляет вашему приложению несколько уровней сложности и точек возможного сбоя.
В каждом пакете Flutter может встретиться баг в коде Dart, или в коде Swift/Objective-C, или в коде Java/Kotlin. А то и в нескольких частях сразу. Его может сломать любое обновление Flutter, Dart, iOS или Android – а вместе с ним сломается и ваше приложение на одной или всех платформах. Если вы не владеет всеми тремя языками и всеми поддерживаемыми платформами, то, вероятно, не захотите искать и устранять проблемы самостоятельно.
Даже если мне удастся найти баг в iOS-части плагина Flutter WebView, я не разбираюсь в Objective-C и не хочу тратить время на бесплодные попытки исправить его. По моему мнению это должно просто работать, если оно не находится в состоянии альфа- или бета-тестирования.
На кого вы хотите положиться?
Дополнительная сложность, которую привносит в проект Flutter, не была бы столь ощутимой и серьезной, если бы за ним стояла сильная организация, которая чувствует ответственность за обеспечение стабильной работы и взаимодействия Dart с нативными функциями SDK.
Все, что вам реально нужно от Flutter, – это написать свое приложение на Dart и развернуть его на iOS и Android. И вы верите, что кросс-платформенное решение позволит вам это сделать, сэкономив время и деньги по сравнению с альтернативными решениями.
Теоретически Flutter может это сделать, но лишь теоретически. Его способность выполнять заявленные обещания все еще оставляет желать лучшего, особенно на iOS. Может быть это связано с уклоном в сторону Android или создателям продукта просто не хватает опыта, но как кросс-платформенная среда разработки Flutter пока проваливается. Если кросс-платформенное решение не может надежно обеспечивать работу с часто используемыми функциями на всех поддерживаемых платформах, оно теряет свои преимущества и лояльность разработчиков.
Я не уверен, что Google сможет сделать Flutter таким же удобным, как нативная разработка. Если они действительно стремятся к этому, то придется вложить больше усилий и денег в проект.
Мне сейчас интересно, сможет ли Ionic справиться с моими задачами лучше. Судя по всему, они сталкиваются с очень похожими проблемами, но пока я не собираюсь переписывать свое приложение еще раз.