FlutterFlow Документация
Заказать разработку

Показ медиа

Картинки, звук, видео и PDF показываются готовыми виджетами. Ниже — откуда виджет берёт файл, что у каждого настраивается и как сделать так, чтобы медиа не тормозило приложение.

Источники медиа

Источник задаётся в Properties Panel свойством [Media] Type — ImageType, AudioType, VideoType и так далее.

Network

Адрес файла вводится прямо в поле Path. Это для медиа, лежащего в интернете.

dm-network-path.avif

Если файл загружен в Firebase или Supabase, нажмите Set from Variable у поля Path и выберите Source → Widget State > Uploaded File URL.

dm-uploaded-file.avif

Если файл ушёл через API, выберите Source → Action Outputs > [имя переменной] (API Response). В ответе API должна быть ссылка на файл; как её достать — см. JSON-путь.

dm-api.avif

инфо

На случай долгой или неудачной загрузки задайте заглушку: нажмите Set from Variable у поля Path и укажите адрес заглушки в свойстве Default Value.

Asset

Файлы можно положить прямо в проект — в Assets. Это картинки, видео, документы, шрифты. Загружаются они через пункт Media Assets в меню слева или кнопкой загрузки в настройках самого виджета.

совет

Как ресурсы лежат в проекте — см. каталог Assets в сгенерированном коде.

select-from-assets

Uploaded File

Файл, который временно лежит на устройстве, доступен через Widget State > Uploaded Local File. Так делают предпросмотр перед отправкой в облако.

dm-local-upload.avif

AudioPlayer

AudioPlayer проигрывает звук — из ресурсов проекта или по внешней ссылке. Откуда брать файл, описано в разделе источников.

совет
Что в коде

Виджет собран на пакете assets_audio_player.

Настройки

  • Title — название дорожки. Задаётся текстом или переменной: состоянием приложения, ответом API, полем документа.
  • Pause on Forward Navigation — по умолчанию звук останавливается при переходе на другую страницу.
  • Play in Background — что делать, когда приложение свернули:
    • Enabled — продолжать играть;
    • Disabled, restore on foreground — поставить на паузу и продолжить при возврате;
    • Disabled, pause — остановить сразу.
  • Цвета:
    • Fill Color — фон виджета;
    • цвета кнопок воспроизведения и паузы;
    • Active/Inactive Track Color — цвет пройденной и оставшейся части полосы прогресса.
  • Elevation — тень под плиткой; 0 убирает её.
  • Текст:
    • Title Text Style — шрифт, размер и цвет названия;
    • Playback Duration Text Style — оформление таймера.

Запись звука

Запись собирается двумя действиями — Start Audio Recording и Stop Audio Recording.

внимание

В режимах Run и Test запись звука не работает — проверять нужно на устройстве.

Start Audio Recording

Действие начинает запись и даёт ей имя, по которому её потом останавливает Stop Audio Recording.

Перед ним нужно запросить разрешение на микрофон и добавить Start Audio Recording в ветку TRUE проверки разрешения. Поле Name по умолчанию заполнено случайной строкой — замените её на осмысленную.

совет

Сразу после старта стоит обновить переменные состояния: отключить кнопку записи, запустить анимацию. Иначе пользователь не понимает, идёт запись или нет.

start-audio-recording.avif

Stop Audio Recording

Если записей несколько, все имена объектов записи перечислены в списке Recorder Name — выберите нужный.

Как настроить:

  1. Выберите Recorder Name — то имя, что задано в Start Audio Recording.
  2. Задайте Action Output Variable Name — в него ляжет сама запись типа Audio Path, её принимает аудиоплеер.
  3. Чтобы отправить запись в Firebase или Supabase, добавьте действие Upload file:
    1. задайте Upload Type;
    2. File Type — Uploaded File: Stop Audio Recording кладёт байты записи в состояние виджета;
    3. File to Upload — Widget State > Recorded File.
  4. Для отправки через API действие загрузки не нужно: добавьте вызов API напрямую. Тело запроса должно быть в формате Multipart, а запись передаётся через Widget State > Recorded File — см. настройку multipart-запроса.
совет
  • После остановки так же обновите состояние: верните кнопки в исходный вид, остановите анимацию.
  • Предусмотрите аварийную остановку. Триггер On Dispose остановит запись, даже если пользователь просто закрыл экран.

Воспроизведение записи

Передайте Action Output Variable Name виджету AudioPlayer — запись начнёт играть.

Play Sound и Stop Sound

Эти действия нужны для коротких звуков — откликов и уведомлений.

Play Sound

Play Sound проигрывает звук в ответ на действие: список обновился, сообщение отправлено.

совет

Только для коротких звуков. Для длинных дорожек берите виджет AudioPlayer.

Действию по умолчанию присваивается случайное Name — по нему звук потом останавливает Stop Sound. Громкость задаётся ползунком Volume (0.0 — тишина, 1.0 — полная). Следующее действие в потоке запускается сразу; чтобы дождаться конца звука, включите Await Playback.

инфо
Где применяется
  • Отклик — на нажатие кнопки, отправку формы, ошибку.
  • Уведомления — напоминания, сообщения, завершение задачи.
  • Игры — достижения, переходы между уровнями.

Stop Sound

Останавливает звук, запущенный действием Play Sound, — например, при сворачивании приложения.

инфо

Действие доступно только если на странице есть Play Sound.

VideoPlayer

VideoPlayer показывает видео из ресурсов проекта или по ссылке. Поддерживаются MP4, MOV, WAV, MPEG и live-фото JPEG. Откуда брать файл — см. источники.

совет
Что в коде

Виджет собран на пакете video_player.

Настройки

  • Aspect Ratio — соотношение сторон: 1.7 соответствует 16:9.
  • AutoPlay — запускать видео при открытии страницы.
  • Loop Video — повторять после окончания.
  • Show Controls — показывать кнопки воспроизведения и полосу перемотки.
  • Allow Full Screen — разрешить полноэкранный режим.
  • Playback Speed Menu — дать менять скорость воспроизведения.
  • Load on Page Load — начать загрузку заранее, при открытии страницы: видео стартует без паузы на буферизацию.
  • Pause on Forward Navigation — ставить на паузу при уходе со страницы.

YoutubePlayer

YoutubePlayer встраивает ролики с YouTube.

совет
Что в коде

Виджет собран на доработанной версии пакета youtube_player_iframe из репозитория FlutterFlow.

Настройки

  • Loop Video — повторять после окончания.
  • Mute Video — запускать без звука.
  • Show Controls — показывать кнопки, громкость, субтитры и полноэкранный режим.
  • Show Full Screen Control — только кнопку полноэкранного режима.
  • Pause on Forward Navigation — ставить на паузу при уходе со страницы.
  • Strict Related Videos — показывать в конце ролики только того же канала.

PdfViewer

PdfViewer показывает PDF — из сети или из ресурсов проекта. Откуда брать файл — см. источники.

совет
Что в коде

Виджет собран на пакете pdfx.

Настройки

  • Horizontal Scroll — листать страницы по горизонтали вместо вертикали.
  • Use Proxy — в Run Mode и Test Mode FlutterFlow тянет PDF через свой прокси, чтобы обойти ограничения CORS. Выключите, если этого не нужно.
  • Use Custom Proxy URL — свой прокси вместо стандартного.

Доступ к PDF из веба

В вебе часть файлов требует дополнительной настройки. PdfViewer’у нужно, чтобы хранилище разрешало запросы с другого домена — то есть чтобы был настроен CORS.

Ниже — как включить CORS для проекта Firebase. Программировать не нужно; официальная инструкция — Firebase CORS Configuration.

Шаг 1. Узнать Project ID

Идентификатор проекта лежит в FlutterFlow > Settings and Integrations > Firebase. Скопируйте Firebase Project ID.

copy-firebase-project-id.avif

Шаг 2. Открыть Cloud Shell

  1. Откройте ссылку, подставив вместо FIREBASE_PROJECT_ID свой идентификатор:
https://console.cloud.google.com/home/dashboard?cloudshell=true&project=FIREBASE_PROJECT_ID
  1. Если появится запрос, нажмите Continue.
  2. Внизу экрана откроется терминал. Если идентификатор проекта не подсвечен жёлтым, нажмите стрелку вниз рядом с именем проекта и выберите нужный.

cloud-shell

Шаг 3. Выполнить команду

  1. Щёлкните по терминалу Cloud Shell.
  2. Вставьте команду, подставив вместо <your-cloud-storage-bucket> имя своего хранилища. Найти его можно в консоли Firebase: Storage, слева вверху будет адрес вида your-project-id.appspot.com.
touch cors.json && \
echo '[{"origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600}]' > cors.json && \
gsutil cors set cors.json gs://<your-cloud-storage-bucket>

storage-bucket.avif

  1. Нажмите Enter.
  2. Если появится запрос, нажмите Authorize.
  3. При успешном выполнении команда напечатает подтверждение.

cors-3

BlurHash

BlurHash — короткая строка, из которой восстанавливается размытая версия картинки. Её показывают, пока грузится оригинал: экран выглядит заполненным с первого кадра, а не мигает пустотой.

blurhash.avif

Порядок такой:

  1. В действии Upload/Save Media включите Include Blur Hash — строка сгенерируется при загрузке картинки.

enable-blurhash.avif

  1. Сохраните её в базу рядом со ссылкой на картинку. Строка доступна в Widget State > Uploaded Local File > Media Blur Hash.

save-blurhash.avif

  1. В свойствах виджета Image включите Use Blur Hash и задайте Blur Hash String из переменной.

use-blurhash.avif

Что помогает не тормозить

  • Включайте бесконечную прокрутку в списках: содержимое подгружается по мере пролистывания, а не всё сразу.
  • Пользуйтесь встроенным кешем картинок FlutterFlow.
  • Включайте кеширование запросов — часто запрашиваемые данные останутся на устройстве.
  • Запрашивайте только то, что действительно показываете на экране.
  • Следите за запросами к базе: лишние поля и лишние документы стоят и времени, и денег.
  • Показывайте BlurHash, пока грузится картинка.
  • Показывайте индикатор загрузки — иначе пауза читается как зависание.
перевод официальной документации FlutterFlow

обновлено

⌕ ESC