Flutter flow что это

Огляд FlutterFlow та автоматично створеного ним коду

Привіт, мене звати Ліза і я Flutter Developer у Customertimes. Уже понад 8 років я займаюся мобільною розробкою і стежу за розвитком технологій у цій сфері. Я перейшла з Android на Flutter розробку 3 роки тому і не шкодую про це.

Ні для кого не новина, що з кожним роком зʼявляються нові інструменти, які дозволяють оптимізувати процес розробки та роблять його якомога доступнішим для широкого кола людей. Сьогодні я хотіла б поділитися з вами досвідом використання low-code платформи для розробки мобільних застосунків — FlutterFlow.

Що таке Flutter

Спочатку трохи теорії з історією. Flutter — це набір програмного забезпечення з відкритим вихідним кодом, який створив Google для побудови мультиплатформних програм за допомогою мови програмування Dart, оптимізований для швидких програм на будь-якій платформі.

Flutter використовується для розробки міжплатформних застосунків на Android, iOS, macOS, Windows, Linux і вебзастосунків з єдиної кодової бази.

Flutter вийшов у травні 2017 року і на сьогодні, як зазначено в документації, за його допомогою було розроблено вже понад 400 000 застосунків для сотень мільйонів пристроїв.

Що таке FlutterFlow

Йдемо далі і переходимо до FlutterFlow. Це потужна low-code платформа, яку можна використовувати для розробки високоякісних мобільних і вебзастосунків на основі фреймворку Flutter. Його drag-and-drop інтерфейс дозволяє створювати юзер-інтерфейси та робочі процеси без необхідності писати код з нуля.

Крім того, він надає доступ до різноманітних готових компонентів і віджетів, які можна налаштувати відповідно до вимог конкретного застосунку.

FlutterFlow — інструмент на основі браузера, з ним можна створювати повнофункціональні масштабовані програми з інтеграцією Firebase, підтримкою API, анімацією, локалізацією, push-повідомленнями, налаштованими платежами тощо. Ви також можете додавати власні функції або віджети за допомогою Dart, щоб розширити наявний функціонал.

Однак важливо зауважити, що хоча такі low-code платформи, як FlutterFlow, є зручними для швидкої побудови прототипів і створення застосунків, вони можуть бути не найкращим вибором для складних або надто кастомізованих застосунків. У деяких випадках вам доведеться написати спеціальний код, щоб отримати бажаний функціонал.

Для кого підходить FlutterFlow

Це перш за все інструмент для нетехнічних користувачів, які завдяки йому мають змогу створити застосунки з нуля без знання мов програмування. І це досить широкий спектр застосунків — від MVP демопроєктів до повноцінних мобільних застосунків для широкої аудиторії.

Користувачі можуть створити мультиплатформний мобільний застосунок без жодного рядка коду. До того ж FlutterFlow має зручний drag-n-drop інтерфейс з можливістю переходу до дерева віджетів, і завдяки цьому застосунок не сплутати з макетом.

Саме тому розуміння фундаментальних підходів розробки для роботи з FlutterFlow було б плюсом, але на практиці це зовсім не є обов’язковим.

Ціни

FlutterFlow пропонує 4 різні плани для користувачів. Чудово, що ця платформа має серед іншого і безкоштовний план, тож можна протестувати інструмент і перевірити, чи підходить він для ваших цілей. Ви не отримаєте доступ до файлів APK, але матимете змогу запустити свій застосунок, протестувати його та переглянути код. Опція завантаження коду вимкнена для користувачів безкоштовного плану, однак ви матимете доступ до всіх файлів.

Якщо ж ви хочете працювати над проєктом разом з командою або плануєте завантажувати чи публікувати файли APK, доведеться вибрати платний тариф користування. Усі вони детально описані на сайті.

Крім того, FlutterFlow може надати експертів, які зорієнтують і можуть допомогти створити рішення з проєктуванням, прототипом, впровадженням і поданням до магазинів застосунків.

Як це працює

Перш за все, FlutterFlow пропонує вам вибрати один з уже наявних шаблонів, і ще більше спростити процес розробки. Або ж, в іншому випадку, ви можете створити застосунок самостійно та розробити свій юзер-інтерфейс з нуля.

Як приклад я використала open public API coinstats, щоб отримати та відобразити динаміку щоденних змін ціни залежно від ринкової капіталізації. Юзер-інтерфейс має ListView з елементами, який створюється динамічно на основі відповіді API. Іконки «Вгору» та «Вниз» мають відображатися залежно від того, як змінюється ціна, та з’являються на екрані з примітивною анімацією повороту.

Результат

Едітор

Ви можете написати власні функції, віджети чи дії на вкладці «Custom Code», але ви не можете змінювати код, створений автоматично UI-конструктором.

Автоматично створений код віджета Dart виглядає так:

import '/backend/api_requests/api_calls.dart'; import '/flutter_flow/flutter_flow_animations.dart'; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; import 'package:flutter_animate/flutter_animate.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart'; import 'package:provider/provider.dart'; import 'home_page_model.dart'; export 'home_page_model.dart'; class HomePageWidget extends StatefulWidget < const HomePageWidget() : super(key: key); @override _HomePageWidgetState createState() => _HomePageWidgetState(); > class _HomePageWidgetState extends State with TickerProviderStateMixin < late HomePageModel _model; final scaffoldKey = GlobalKey(); final _unfocusNode = FocusNode(); final animationsMap = < 'listViewOnPageLoadAnimation': AnimationInfo( trigger: AnimationTrigger.onPageLoad, effects: [ MoveEffect( curve: Curves.easeInOut, delay: 0.ms, duration: 800.ms, begin: Offset(0, 1000), end: Offset(0, 0), ), ], ), 'iconOnPageLoadAnimation1': AnimationInfo( trigger: AnimationTrigger.onPageLoad, effects: [ VisibilityEffect(duration: 1000.ms), RotateEffect( curve: Curves.easeInOut, delay: 1000.ms, duration: 1000.ms, begin: 0, end: 1, ), ], ), 'iconOnPageLoadAnimation2': AnimationInfo( trigger: AnimationTrigger.onPageLoad, effects: [ VisibilityEffect(duration: 1000.ms), RotateEffect( curve: Curves.easeInOut, delay: 1000.ms, duration: 1000.ms, begin: 0, end: 1, ), ], ), >; @override void initState() < super.initState(); _model = createModel(context, () =>HomePageModel()); > @override void dispose() < _model.dispose(); _unfocusNode.dispose(); super.dispose(); >@override Widget build(BuildContext context) < return Scaffold( key: scaffoldKey, backgroundColor: FlutterFlowTheme.of(context).primaryBackground, appBar: AppBar( backgroundColor: FlutterFlowTheme.of(context).primaryColor, automaticallyImplyLeading: false, title: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Markets', style: FlutterFlowTheme.of(context).title2.override( fontFamily: 'Poppins', color: Colors.white, fontSize: 22, ), ), ], ), actions: [], centerTitle: false, elevation: 2, ), body: SafeArea( child: GestureDetector( onTap: () =>FocusScope.of(context).requestFocus(_unfocusNode), child: SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.max, children: [ RefreshIndicator( onRefresh: () async < setState(() =>_model.pagingController?.refresh()); await _model.waitForOnePage(); >, child: PagedListView( pagingController: () < if (_model.pagingController != null) < return _model.pagingController!; >_model.pagingController = PagingController( firstPageKey: ApiPagingParams( nextPageNumber: 0, numItems: 0, lastResponse: null, ), ); _model.pagingController! .addPageRequestListener((nextPageMarker) < GetMarketsInfoCall.call( start: valueOrDefault( getJsonField( (nextPageMarker.lastResponse ?? ApiCallResponse(<>, <>, 200)) .jsonBody, r'''$.next''', ), 1, ), ).then((listViewGetMarketsInfoResponse) < final pageItems = getJsonField( listViewGetMarketsInfoResponse.jsonBody, r'''$.coins''', ).toList() as List; final newNumItems = nextPageMarker.numItems + pageItems.length; _model.pagingController!.appendPage( pageItems, (pageItems.length >0) ? ApiPagingParams( nextPageNumber: nextPageMarker.nextPageNumber + 1, numItems: newNumItems, lastResponse: listViewGetMarketsInfoResponse, ) : null, ); >); >); return _model.pagingController!; >(), padding: EdgeInsets.zero, shrinkWrap: true, reverse: false, scrollDirection: Axis.vertical, builderDelegate: PagedChildBuilderDelegate( // Customize what your widget looks like when it's loading the first page. firstPageProgressIndicatorBuilder: (_) => Center( child: SizedBox( width: 50, height: 50, child: CircularProgressIndicator( color: FlutterFlowTheme.of(context).primaryColor, ), ), ), itemBuilder: (context, _, marketsIndex) < final marketsItem = _model.pagingController!.itemList![marketsIndex]; return Padding( padding: EdgeInsetsDirectional.fromSTEB(8, 4, 8, 4), child: InkWell( onTap: () async < context.pushNamed( 'details', queryParams: < 'info': serializeParam( getJsonField( marketsItem, r'''$''', ), ParamType.JSON, ), >.withoutNulls, ); >, child: Container( width: 100, height: 100, decoration: BoxDecoration( color: FlutterFlowTheme.of(context) .secondaryBackground, ), child: Padding( padding: EdgeInsetsDirectional.fromSTEB( 16, 16, 16, 16), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( getJsonField( marketsItem, r'''$.name''', ).toString(), textAlign: TextAlign.center, style: FlutterFlowTheme.of(context) .subtitle1, ), Row( mainAxisSize: MainAxisSize.max, children: [ if (getJsonField( marketsItem, r'''$.priceChange1d''', ) > 0) Icon( Icons.arrow_drop_up, color: FlutterFlowTheme.of(context) .secondaryColor, size: 56, ).animateOnPageLoad(animationsMap[ 'iconOnPageLoadAnimation1']!), if (getJsonField( marketsItem, r'''$.priceChange1d''', ) < 0) Icon( Icons.arrow_drop_down, color: Color(0xFFE0180E), size: 56, ).animateOnPageLoad(animationsMap[ 'iconOnPageLoadAnimation2']!), Text( getJsonField( marketsItem, r'''$.priceChange1d''', ).abs().toStringAsFixed(3), style: FlutterFlowTheme.of(context) .bodyText1 .override( fontFamily: 'Poppins', fontSize: 20, ), ), ], ), ], ), ), ), ), ); >, ), ), ).animateOnPageLoad( animationsMap['listViewOnPageLoadAnimation']!), ], ), ), ), ), ); > >

Скільки часу знадобиться для реалізації такого простого проєкту? Що ж, у мене це зайняло майже 20 хвилин, але на першу спробу я витратила бо мала зрозуміти, куди розмістити свій виклик API, як посилатися на певну змінну, ба навіть, де цю змінну створити і так далі.

Досвідчений розробник без проблем реалізує такий застосунок вручну за допомогою IDE за короткий проміжок часу, але перший проєкт протягом Звучить неймовірно. І, звичайно, з FlutterFlow вам не потрібно знову і знову писати якийсь шаблонний код. А працювати з інтерфейсом drag-n-drop набагато легше та цікавіше.

Чи допомогли мені знання про Flutter on Dart під час написання проєкту? Так, звісно. Чи це важливо? Ні, звісно. Усе, що вам потрібно зробити, — створити UI зі зручним інтерфейсом і написати мінімум коду для невеликих задач. Нетехнічні користувачі без проблем впораються з цим інструментом, особливо коли ми всі маємо Google і можемо знайти відповіді на все, що потрібно. Так, це займе не але, без сумнівів, це значно швидше, ніж вчити мову програмування.

Поради початківцям

1. Виберіть рекомендований браузер. Як зазначено в документації, оптимальним браузером для FlutterFlow є Google Chrome. Зі свого досвіду можу доповнити: використовуючи інші браузери, ви можете зіткнутися з проблемами, повʼязаними з продуктивністю та зручністю. Мені довелося перейти на Chrome у середині проєкту. Тому краще використовувати його з самого початку.
2. Не пропускайте туторіал. Він досить простий і невеликий, але в ньому зібрані всі основні функції цього інструменту. Як на мене, він трохи застарілий, але це не завадить вам знайти всі необхідні функції та ознайомитися з платформою.
3. Не пропускайте Firebase setup. Під час створення проєкту вам запропонують додати до нього Firebase. Це необов’язково, але без підключення до Firebase ви матимете обмежені можливості, і вам все одно доведеться його додавати. Тому краще все налаштувати від початку. До того ж розробники Flutterflow зробили це дуже простим, що радує.
4. І обов’язково зберігайте документацію під рукою, щоб мати змогу підійти до розвʼязання проблеми якнайефективнішим чином.

Висновок

Якщо ви плануєте використовувати FlutterFlow для створення застосунків, оцініть свої вимоги та визначте, чи здатна платформа задовольнити ваші потреби. Також варто враховувати такі фактори, як масштабованість, безпека та продуктивність.

Не нехтуйте силою спілкування: проконсультуйтесь з досвідченими розробниками та запийте їхню думку стосовно того, чи доцільно використовувати FlutterFlow у вашому конкретному випадку.

Хай там як, я переконана, що FlutterFlow є чудовим інструментом для реалізації власних ідей у застосунках. Ця платформа розвивається з дивовижною швидкістю, і хоча в ній трапляються помилки, розробники швидко все виправляють і додають нові функції для вдосконалення продукту.

�� Подобається Сподобалось 23

До обраного В обраному 6

Обзор FlutterFlow — no-code-конструктора нативных приложений для iOS и Android

Разбираемся, как работает и кому подходит FlutterFlow — зерокодинговый конструктор приложений для Android и iOS.

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

Но есть инструменты, которые помогают разрабатывать приложения в разы дешевле, быстрее и без кода — это no-code-конструкторы. FlutterFlow как раз один из них.

Что такое FlutterFlow

FlutterFlow — это зерокодинговый конструктор мобильных приложений для Android и iOS. От других сервисов он отличается тем, что на выходе выдает код на фреймворке Flutter от Google. Нужно собрать приложение в визуальном редакторе, скачать его исходный код, скомпилировать файл и получить сборки, которые можно загрузить в App Store и Google Play. Для этого не обязательно уметь программировать.

Создатели FlutterFlow говорят, что сделать приложение в их сервисе можно в 10 раз быстрее, чем с программистами, потому что вы сразу делаете проект под iOS и Android.

Бесплатная авторизация по номеру телефона. «Из коробки» FlutterFlow позволяет бесплатно добавить вход по номеру мобильного. Ограничение — 10 000 авторизаций в месяц. При этом у конкурентов одна СМС стоит 2–3 рубля.

Интеграция с Firebase. Это среда, где работает бэкенд и хранится база данных приложения. Все бесплатно, если не превышать лимит в 5 ГБ и 50 000 обращений в сутки. Например, в Adalo база данных на 5 ГБ есть только в плане за 50 $ в месяц.

Легко подключить внешние API. Приложение нетрудно связать с мессенджерами, сервисами рассылок и тысячами других инструментов. Команда конструктора опубликовала видеоурок о работе с API.

Проект легко тестировать. Не обязательно проверять сборку сразу на Android или iOS — проверить UI и навигацию можно прямо в вебе без эмуляторов.

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

Сколько стоит FlutterFlow

У FlutterFlow есть три тарифа — бесплатный, стандартный за 30 $ и профессиональный за 70 $ в месяц.

Бесплатный план подойдет, чтобы построить и протестировать свое приложение без настоящих данных. Его возможности:

• визуальный конструктор;
• 40 готовых виджетов;
• интеграция с Firebase;
• авторизация пользователей;
• превью приложения;
• кастомный код;
• интеграции с несколькими платежными системами;
• интеграция с Google AdMob.

В плане за 30 $ в месяц приложение уже можно собрать и протестировать с настоящей базой данных. Тариф позволяет собирать установочный APK-файл для Android и выгружать исходный код. Готовый код нужно компилировать и подписывать, поэтому сборку для iOS не получится сделать без MacBook.

В профессиональном плане доступны связки со сторонними сервисами через API, интеграция с GitHub, легко подключить Codemagic — систему для тестирования, контроля версий и сборки приложений для Android и iOS (с ней MacBook не понадобится). Там также есть визуальный редактор, чтобы напрямую редактировать данные в базе Firestore.

Чем FlutterFlow отличается от Adalo

По сравнению с Adalo, приложения на FlutterFlow работают намного быстрее. Вы получаете исходный код, а не готовые файлы проекта. У конструктора есть бесплатная база данных, при этом профессиональный план стоит на 130 $ дешевле.

Минусы тоже есть:

• у FlutterFlow довольно высокий порог входа;
• разработка на FlutterFlow занимает в 3–4 раза больше времени, чем на Adalo;
• в конструкторе нет формул и математических операций, их нужно добавлять вручную.

Кейсы приложений на FlutterFlow

Создатели FlutterFlow говорят, что на нем легко построить все, что угодно — интернет-магазины, медицинские и банковские приложения, мессенджеры и другие проекты.

Вот примеры приложений на FlutterFlow:

Фриланс-биржа для зерокодеров. Сергей Горелов, эксперт, который помог редакции «Зерокодера» сделать этот обзор, собрал на FlutterFlow мобильное приложение для iOS и Android. В нем можно размещать и выполнять заказы на no-code-разработку. В проекте реализован вход и регистрация по номеру мобильного, авторизация через аккаунты Facebook, Apple ID и Google. Подробнее о бирже Сергей рассказал в своей статье на vc.ru.

Чат для айтишников. На сайте FlutterFlow есть демо чата для IT-специалистов. В нем реализована авторизация по email и гостевой вход. На основе этого шаблона можно за считанные минуты добавить в свое приложение функцию чата.

Где освоить FlutterFlow

Чтобы научиться воплощать свои идеи в жизнь без огромных бюджетов, приходи осваивать FlutterFlow на наш продвинутый курс по мобильным приложениям! Сейчас этот курс доступен и по клубному абонементу — восемь курсов по цене двух!

Еще у FlutterFlow есть подробная документация, где рассказано, как работать с визуальным редактором и как создавать проекты и страницы. Есть инструкции по работе с виджетами, базой данных и сторонними API. В разделе FAQ рассказывают, как решить самые частые проблемы с FlutterFlow.

На официальном YouTube-канале инструмента есть 40 видеоуроков о том, как внедрять кастомный код, выкладывать приложения в App Store, добавлять монетизацию Google AdMob, внедрять авторизацию пользователей и многое другое.

Задать вопросы по FlutterFlow и пообщаться с экспертами можно в русскоязычном сообществе.

Вывод — кому подойдет FlutterFlow

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

FlutterFlow

FlutterFlow — онлайн-инструмент для создания нативных мобильных приложений. Инструмент позволяет компаниям создавать рабочие макеты или полноценные мобильные приложения без помощи разработчиков. Это могут быть корпоративные социальные сети, приложения для созданий расписаний, трекеры задач, карты и другие приложения. Созданное в FlutterFlow приложение будет автоматически оптимизированно под устройства на системах iOS и Android.

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

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

Особенности FlutterFlow

• Создание мобильных приложений и MVP-продуктов
• No-code-редактор для создания приложений
• Ведение базы данных
• Создания интеграций при помощи API
• Публикация на маркетплейсах приложений iOS и Android
• Возможность скачать исходный код созданного приложения

Интересные факты

1. С помощью интеграции с Stripe, приложения, созданные на FlutterFlow, могут принимать платежи без написания дополнительного кода.
2. FlutterFlow является активным участником сообщества Flutter и часто участвует в конференциях и мероприятиях, посвященных данной технологии.
3. Сервис включает в себя реальный просмотр приложения, позволяя пользователям тестировать свои приложения прямо в браузере.

Превратите свою идею в приложение с экспертами FlutterFlow!

Шаг 1 — Расскажите нам Вашу идею, мы дадим первичную оценку стоимости разработки, для общего понимания необходимого бюджета и времени.
Шаг 2 — Вашу идею переносим в дизайн. В дизайне продумываем всю логику, хорошо продуманный дизайн с логикой, это 70% экономии времени/денег. Это самый важный процесс в разработке приложения.
Шаг 3 — Делим на спринты работы по разработке приложения
Шаг 4 — Начинаем разработку
Шаг 5 — Тестируем приложение
Шаг 6 — Публикуем в Аппстор и Гуглплей
Шаг 7 — Сопровождаем и дорабатываем (опционально)

Мы работаем в формате Time&Material. Итоговая стоимость нашей работы складывается из фактических трудозатрат сотрудников.Мы даем предварительные оценки задачам, но фактические трудозатраты могут отличаться от плановых (как в большую, так и в меньшую сторону). Время разработчиков контролируется через приложение Монитаск, у Вас не будет сомнений, сколько времени потратил разработчик на разработку.