Перейти к основному содержимому

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

FlutterFlow поддерживает публикацию в вебе, позволяя создавать и размещать веб-приложения в дополнение к мобильным. В этом руководстве объясняется, как использовать FlutterFlow для публикации веб-приложений — от активации поддержки веба и настройки дизайна до деплоя и добавления собственных доменов.

к сведению
  • Вы можете выпустить существующее мобильное приложение как веб-приложение с минимальными изменениями.
  • Все пользователи получают бесплатный хостинг и поддомены.
  • Некоторые компоненты были переработаны для лучшей работы в вебе.

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

Публикация в веб включает следующие шаги:

  1. Включение поддержки веба
  2. Настройка дизайна (по желанию)
  3. Решение ошибок
  4. Добавление общей информации
  5. Деплой
  6. Просмотр опубликованного приложения

1. Включение поддержки веба​

По умолчанию FlutterFlow позволяет запускать приложение на Android и iOS без дополнительной настройки. Чтобы развернуть его в вебе, нужно включить поддержку платформы Web.

Перейдите в Settings and Integrations > Project Setup > Platform и включите переключатель Web.

enable-web

к сведению

Включение поддержки веба автоматически активирует глубокие ссылки для проекта. Это позволяет создавать уникальные URL для каждой страницы приложения.

Расширенные настройки веба​

  1. Использовать CanvasKit — обеспечивает высокое качество отрисовки графики и текста в веб-приложениях.

  2. CORS Proxy для изображений (опционально) — при использовании CanvasKit некоторые изображения могут блокироваться, если сервер не разрешает кросс-доменные запросы (CORS).
    Выберите подходящий вариант в зависимости от того, где размещаются изображения:

    • None — если изображения хранятся в Firebase Storage.
    • Deploy with Firebase — если используете внешние источники, но приложение развёрнуто через Firebase.
    • Custom Proxy URL — если хотите указать собственный прокси. Можно использовать, например, cors-anywhere.
    warning

    Важно: использование прокси может немного увеличить время загрузки. Лучше хранить изображения в Firebase Storage или CORS-разрешённом CDN.

  3. Импорт библиотеки Emoji — добавляет поддержку эмодзи, но увеличивает размер приложения.

  4. Использовать Wasm (Beta) — сборка через WebAssembly-рендерер. Подробнее см. документацию Flutter по Wasm.

    warning
    • Функция в бете.
    • Не поддерживается в Test Mode.

Устранение ошибок CORS​

Если изображения не загружаются:

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

2. Настройка дизайна (по желанию)​

Если создаёте веб-приложение, установите холст в режим desktop.
При поддержке обеих платформ адаптируйте UI под разные экраны, используя Responsive Visibility.

3. Решение предупреждений совместимости с вебом​

Если вы включили поддержку веба для существующего мобильного проекта, FlutterFlow может показать предупреждения о несовместимых виджетах или действиях — например, AdMob, RevenueCat, Share и другие.

Эти предупреждения не мешают публикации, но могут ухудшить UX.
Попробуйте найти аналог на pub.dev с поддержкой Web.

warning

Проверьте: все используемые пакеты должны поддерживать Web.
web-support

4. Добавление общей информации​

Перейдите в Settings and Integrations > App Settings > Web Deployment.
В разделе General Information заполните поля:

  • Site URL — поддомен, например mywebapp.flutterflow.app.
  • SEO Title — заголовок для соцсетей и поисковиков.
  • Site Description — краткое описание для сниппета.
  • Page Title — заголовок вкладки браузера.
  • Favicon — иконка вкладки (можно создать на favicon.io).
  • Status Bar Color — цвет статус-бара в Safari и PWA.
  • Social Share Image URL — картинка предпросмотра в соцсетях.
  • Individual Page Titles — показывает имя страницы во вкладке.
  • Show Watermark — убрать надпись “Built in FlutterFlow”.
  • Allow Showcasing — разрешить показ проекта на сайте FlutterFlow.
  • Allows Search Engine Indexing — разрешить индексирование.
  • Enabling PWA — включить поддержку PWA (установка, оффлайн, пуши).
  • Use CanvasKit — повысить качество отрисовки.
  • Use Original Engine Initialization — может улучшить загрузку.
к сведению

Совет: убрать watermark можно только на платных планах.

5. Деплой​

Нажмите Publish — публикация займёт 2–3 минуты.
По умолчанию проект развёртывается на поддомене your-project-id-1234.flutterflow.app.

Вы можете указать собственный поддомен.

  • Бесплатный план: до 2 доменов.
  • Платные планы: до 20.
  • Enterprise — без ограничений.
к сведению

После публикации можно обновить сайт повторным нажатием Publish.

Если поддомен занят, измените его и попробуйте снова.
Для отмены публикации нажмите Unpublish.

6. Просмотр опубликованного приложения​

Нажмите иконку глаза рядом с кнопкой Publish, чтобы открыть опубликованное приложение.
view-published-site.avif

Добавление собственного домена​

Вы можете подключить свой домен (например, myapp.com) для профессионального внешнего вида и узнаваемости бренда.

Важно
  • Все платные тарифы включают 1 бесплатный домен.
  • Один проект → один домен или поддомен.

Шаги подключения:

  1. Введите домен без www, например mywebapp.com.
  2. Настройте DNS-записи у регистратора (например, GoDaddy, Namecheap, Google Domains).
  3. Нажмите Connect, затем Publish.
    connect-custom-domain.avif

Добавление собственных заголовков​

Можно добавить теги <style> или <script> в раздел <head> веб-приложения.

warning

Некорректные заголовки могут вызвать ошибки.

Введите HTML-теги в поле Custom Headers и опубликуйте заново.
Проверить можно через инспектор (⌘+⌥+I на Mac, F12 на Windows).

При использовании динамических ссылок Firebase обновите схему URL, чтобы ссылки открывались корректно и в вебе.

update-firebase-dynamic-link.avif

Добавление поддомена в авторизованные домены Firebase​

Если используется Firebase Authentication, добавьте свой поддомен в список разрешённых доменов в Firebase Console.

История публикаций​

История публикаций помогает отслеживать изменения и успешные деплои.
Каждая запись содержит дату, время и статус (успешно/ошибка).
Чтобы посмотреть предыдущие версии, нажмите View Full History.

view-deploy-history.avif