Публикация в вебе

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

Как выкатить сайт

1. Включить поддержку веба
2. Поправить раскладку
3. Разобрать предупреждения о совместимости
4. Заполнить сведения о сайте
5. Выкатить
6. Открыть готовый сайт

1. Включить поддержку веба

Android и iOS доступны сразу, веб нужно включить отдельно: Setting and Integrations → Project Setup → Platform, переключатель Web.

Дополнительные настройки веба

Use CanvasKit — отрисовка через CanvasKit: качественнее графика и текст, но сборка тяжелее.

CORS Proxy for Images — прокси для картинок со сторонних серверов. С CanvasKit Flutter рисует через WebGL, а тот требует доступа к самим пиксельным данным, поэтому браузер применяет правила CORS и часть картинок не загружается. Вариант выбирается по тому, где картинки лежат:

• None — картинки только из Firebase Storage. Настройте в Firebase Storage доступ для веба; такие картинки FlutterFlow из-под прокси исключает сам.
• Deploy with Firebase — картинки на сторонних серверах, но приложение работает с Firebase. FlutterFlow развернёт региональную облачную функцию-прокси в вашем проекте Firebase; достаточно нажать Deploy под этим пунктом.
• Custom Proxy URL — свой прокси, если Firebase не используется. Собрать его можно, например, на cors-anywhere или на Cloudflare Workers.

Import Emoji Library — нужна, если эмодзи могут появиться в любом текстовом виджете. Увеличивает размер веб-сборки.

Use Wasm (Beta) — сборка на движке Wasm (WebAssembly), см. документацию Flutter.

Если картинки не загружаются

1. Откройте консоль браузера и поищите сообщения про CORS.
2. Проверьте, разрешает ли сервер картинок кросс-доменные запросы.
3. Убедитесь, что ваш прокси доступен и работает.
4. Для Firebase Storage проверьте, что правила разрешают публичное чтение.

2. Поправить раскладку

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

Отдельные виджеты для разных платформ показываются и скрываются через Responsive Visibility.

3. Предупреждения о совместимости

Когда веб включают в готовом мобильном приложении, всплывают предупреждения: часть виджетов и действий в вебе не работает. Это касается AdMob, RevenueCat, действия Share, действия Launch Map и, возможно, ваших собственных виджетов.

Известные проблемы показываются как Platform Support Warning. Выкатке они не мешают, но в вебе приложение может вести себя не так, как задумано.

Обычно выход — найти на pub.dev пакет-замену с поддержкой веба и приличным рейтингом.

4. Сведения о сайте

Откройте Setting and Integrations → App Settings → Web Deployment.

В разделе General Information заполните:

• Site URL — адрес сайта. Менять можно только поддомен, то есть часть перед flutterflow.app: например, mywebapp.flutterflow.app.

  внимание

  • Поддомен меняется вводом нового адреса и повторной публикацией — новый адрес заработает со следующей выкатки.
  • Старые адреса в любой момент могут перестать работать и достаться другому пользователю.
  • Количество поддоменов на аккаунт ограничено: на платных тарифах — до 20. Когда лимит близко, FlutterFlow предупредит.

• SEO Title — заголовок в результатах поиска и в карточке при репосте.

• Site Description — описание там же.

• Page Title — то, что видно во вкладке браузера на всех страницах.

• Favicon — значок во вкладке. Кнопка Upload Favicon +; сделать его можно бесплатно, например, здесь.

• Status Bar Color — цвет строки состояния в Safari на iOS и в установленном PWA.

• Social Share Image URL — картинка для карточки при репосте (OpenGraph, Twitter card).

• Individual Page Titles — показывать во вкладке название текущей страницы. Тогда заполните Page Title в Page → Properties Panel → Route Settings.

• Show Watermark — надпись «Built in FlutterFlow» в правом нижнем углу. Убрать её можно только на платных тарифах.

• Allow Showcasing — разрешить FlutterFlow показывать ваш проект у себя на сайте.

• Allows Search Engine Indexing — разрешить индексацию поисковиками.

• Enabling PWA — приложение можно установить на устройство, оно работает офлайн и умеет push-уведомления, минуя магазины приложений.

• Use CanvasKit — отрисовка через CanvasKit вместо HTML-рендерера: качественнее графика там, где это важно.

• Use Original Engine Initialization — старый способ инициализации движка Flutter Web; иногда выкаченный сайт с ним грузится быстрее.

5. Выкатка

Нажмите Publish — выкатка занимает 2–3 минуты.

По умолчанию сайт публикуется на поддомен вида your-project-id-1234.flutterflow.app. Такие адреса не расходуют квоту, и проектов на них можно выкатить сколько угодно.

Свой поддомен задаётся в поле Site URL на вкладке Settings → Web Publishing, если он свободен. На бесплатном тарифе таких адресов 2, на платных — до 20, на Enterprise — без ограничений.

Если поддомен занят, появится сообщение «Error reserving subdomain: Subdomain your-domain-name is already used by another project» — введите другой адрес и опубликуйте снова.

6. Открыть готовый сайт

Значок глаза рядом с кнопкой Publish.

---

Свой домен

К веб-приложению можно подключить собственный домен вместо адреса на flutterflow.app.

1. Введите Custom Domain URL — только имя домена с расширением, без www: mywebapp.com, а не www.mywebapp.com.

2. Настройте DNS у регистратора домена:

   • Откройте управление DNS и создайте записи, показанные в интерфейсе FlutterFlow. Других записей A или AAAA после этого остаться не должно. Инструкции популярных регистраторов: GoDaddy, Namecheap, Google Domains.

     

3. Нажмите Connect.

4. Когда домен подключится, нажмите Publish ещё раз.

   

---

Свои заголовки в <head>

В <head> опубликованного сайта можно добавить свои теги — например, style или script со встроенным или внешним JavaScript.

Впишите тег в поле Custom Headers и опубликуйте сайт заново.

---

Firebase Dynamic Links

Пока сервис работал, при выкатке веб-версии требовалось поменять схему адресов Firebase Dynamic Links — иначе общие ссылки открывались в браузере неправильно.

---

Поддомен в списке разрешённых доменов Firebase

Если используется Firebase Authentication, ваш поддомен нужно добавить в список разрешённых доменов в консоли Firebase. Без этого вход через соцсети и по телефону работать не будет.

---

История выкаток

У каждой выкатки есть время и статус — успешна она или нет. По истории видно, как менялся сайт и когда что-то пошло не так.

Кнопка View Full History открывает список и предыдущие удачные версии.