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

Отображение медиа

Эффективное отображение медиа имеет решающее значение для улучшения пользовательского опыта в приложении FlutterFlow. Независимо от того, работаете ли вы с изображениями, аудио, видео или PDF, FlutterFlow предоставляет гибкие возможности для интеграции и управления медиа. В этом руководстве описано, как задавать источники медиа, настраивать параметры воспроизведения и внедрять лучшие практики, такие как отложенная загрузка, кэширование и BlurHash, для оптимизации производительности.

Типы медиа​

Чтобы отображать медиа на виджетах, перейдите в Properties Panel и укажите источник медиа в параметре [Media] Type (например, ImageType, AudioType, VideoType). Вот доступные варианты:

Network​

Введите URL медиа напрямую в поле ввода 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 > [Action Output Variable Name] (API Response). Убедитесь, что ответ API содержит URL загруженного файла. Узнайте, как извлекать URL с помощью JSON path.

dm-api.avif

к сведению

Чтобы обрабатывать сценарии, когда медиа загружается медленно или не загружается, вы можете задать заглушку. Нажмите Set from Variable в поле Path и укажите URL заглушки в свойстве Default Value.

Asset​

Вы также можете отображать файлы медиа, загруженные в Assets. Assets — это ресурсы, такие как изображения, видео, документы, шрифты и другие файлы, которые вы включаете локально в проект. Чтобы загрузить assets, нажмите Media Assets в боковом меню слева и добавьте файлы напрямую с устройства. В качестве альтернативы вы можете напрямую загрузить и отобразить файлы при настройке виджетов медиа, нажав на иконку загрузки.

подсказка

Подробности о том, как хранятся assets в проекте, см. в директории Assets в сгенерированном коде.

select-from-assets

Uploaded File​

Вы также можете обращаться к файлам медиа в приложении, которые временно хранятся в приложении. Например, если вы хотите предварительно просмотреть изображение перед отправкой в облачное хранилище, вы можете сделать это, установив источник как Widget State -> Uploaded Local File.

dm-local-upload.avif

AudioPlayer​

Виджет AudioPlayer позволяет интегрировать воспроизведение аудио в приложения. Вы можете воспроизводить аудио как из загруженных assets, так и из внешних URL. Подробности об обращении к медиа см. в разделе Отображение медиа.

Generated Code

Виджет AudioPlayer в FlutterFlow использует пакет assets_audio_player для воспроизведения аудио.

Параметры настройки

  • Title: Укажите заголовок аудио в свойстве Title. Вы можете задать его напрямую или привязать к переменной, такой как переменная состояния приложения, ответ API или документ Firestore.
  • Pause on Forward Navigation: По умолчанию аудио останавливается при переходе на другую страницу.
  • Play in Background: Определите поведение аудио при переводе приложения в фоновый режим:
    • Enabled: Аудио продолжает воспроизводиться.
    • Disabled, restore on foreground: Аудио приостанавливается и возобновляется, когда приложение снова становится активным.
    • Disabled, pause: Аудио останавливается сразу при переводе приложения в фоновый режим.
  • Colors:
    • Background Color: Настройте фон с помощью свойства Fill Color.
    • Playback Button Color: Измените цвета кнопок воспроизведения и паузы.
    • Active/Inactive Track Color: Измените цвет индикатора прогресса, показывающего текущую позицию воспроизведения.
  • Elevation: Используйте свойство Elevation для изменения тени под плиткой аудио. Более высокое значение увеличивает размер тени, а значение 0 удаляет тень.
  • Text Styling:
    • Title Text: Настройте шрифт, размер и цвет заголовка в разделе Title Text Style.
    • Playback Duration Text: Измените стиль текста длительности воспроизведения в разделе Playback Duration Text Style.

Audio Recording​

Вы можете реализовать функциональность записи аудио с помощью действий Start Audio Recording и Stop Audio Recording.

warning

В настоящее время запись аудио не поддерживается в режимах Run или Test из-за определённых ограничений.

Start Audio Recording [Action]​

Это действие запускает запись. Оно также присваивает имя записи, которое вы можете использовать позже для остановки записи с помощью действия Stop Audio Recording.

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

подсказка

После запуска записи вы можете обновить переменные состояния, чтобы отразить изменения в UI. Например, вы можете включать/отключать кнопки или запускать анимации записи, чтобы предоставить визуальный сигнал о процессе. Этот шаг позволяет улучшить пользовательский опыт и обеспечить обратную связь в реальном времени во время записи.

start-audio-recording.avif

Stop Audio Recording [Action]​

Если у вас несколько действий записи аудио, все имена объектов Recorder (автоматически сгенерированные FlutterFlow или вручную заданные пользователем) перечислены в выпадающем списке Recorder Name. Выберите объект записи, который хотите остановить, и это остановит текущую запись.

Чтобы захватить и воспроизвести записанное аудио, обязательно укажите Action Output Variable 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 не нужно добавлять действие Upload file. Просто напрямую добавьте API call и выберите API, которое загрузит файл на ваш сервер. Note, что тело запроса для этого API должно быть в формате Multipart. Вы можете передать запись аудио через Widget State > Recorded File в переменной API. См., как настроить API для тела запроса multipart.
подсказка
  • После остановки записи вы можете обновить переменные состояния, чтобы отразить изменения в UI. Например, вы можете включать/отключать кнопки или останавливать анимации записи.
  • Всегда полезно иметь механизм защиты, чтобы гарантировать правильную остановку записей, даже если пользователь забудет сделать это вручную. Например, вы можете использовать триггер действия On Dispose для остановки записи, когда пользователь закрывает приложение без ручной остановки.

Playing audio recording​

После остановки записи вы можете просто предоставить Action Output Variable Name виджету Audio Player, чтобы начать воспроизведение записанного аудио.

Play or Stop Sound​

Действия Play Sound и Stop Sound предоставляют гибкость для улучшения пользовательского опыта с помощью аудиоэффектов или фоновых звуков.

Play Sound [Action]​

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

подсказка

Рекомендуется использовать это действие только для коротких аудио. Для более длинных аудио рассмотрите добавление виджета AudioPlayer.

По умолчанию этому действию присваивается случайное Name для последующей остановки с помощью действия Stop Sound. Вы можете настроить громкость с помощью ползунка Volume (0.0 = без звука, 1.0 = полная громкость). Действие по умолчанию неблокирующее, что позволяет последующим действиям запускаться немедленно. Чтобы дождаться завершения воспроизведения перед продолжением, включите опцию Await Playback.

Use cases
  • Feedback Sounds: Проигрывайте звуки для кликов по кнопкам, отправки форм или оповещений об ошибках, чтобы улучшить взаимодействие и обратную связь с пользователем.
  • Notifications: Проигрывайте звуковые оповещения для напоминаний, сообщений или завершения задач.
  • Gamification: Улучшайте игровые опыты с помощью звуковых эффектов для достижений, уровней или взаимодействий.

Stop Sound [Action]​

Вы можете остановить звук, который в настоящее время воспроизводится и был запущен действием Play Sound. Например, если в приложении проигрываются звуковые эффекты, вам может потребоваться остановить их, когда приложение приостанавливается или останавливается.

к сведению

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

VideoPlayer​

Виджет VideoPlayer используется для показа видео из загруженных assets или по URL-ссылке. Виджет VideoPlayer может воспроизводить различные форматы видео, такие как MP4, MOV, WAV, MPEG и JPEG motion photos. Подробности об обращении к медиа см. в разделе Отображение медиа.

Generated Code

VideoPlayer использует пакет video_player для надёжного воспроизведения видео на разных платформах.

Параметры настройки

Виджет VideoPlayer включает несколько опций для соответствия дизайну и функциональности вашего приложения:

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

YoutubePlayer​

Виджет YouTubePlayer в FlutterFlow позволяет интегрировать и воспроизводить видео YouTube в приложении. Он предлагает настраиваемые опции воспроизведения и интуитивный интерфейс для улучшения пользовательского опыта.

Generated Code

YoutubePlayer использует кастомную версию пакета youtube_player_iframe, размещённую в репозитории GitHub FlutterFlow.

Параметры настройки

  • Loop Video: При включении видео будет автоматически воспроизводиться заново после завершения.
  • Mute Video: Запускает видео в заглушённом состоянии.
  • Show Controls: Отображает элементы управления воспроизведением, такие как play/pause, громкость, субтитры и полноэкранный режим.
  • Show Full Screen Control: Это специально отображает кнопку переключения в полноэкранный режим среди элементов управления.
  • Pause on Forward Navigation: Автоматически приостанавливает видео при переходе пользователя на другую страницу.
  • Strict Related Videos: Гарантирует, что связанные видео, показываемые в конце воспроизведения, будут из того же канала, что и текущее воспроизводимое видео.

PdfViewer​

В FlutterFlow виджет PdfViewer позволяет отображать PDF-файлы в приложении, поддерживая как URL из сети, так и локально загруженные assets. Подробности см. в разделе Отображение медиа.

Generated Code

PdfViewer в FlutterFlow использует пакет pdfx для рендеринга PDF.

Параметры настройки

  • Horizontal Scroll: По умолчанию PdfViewer позволяет вертикальную прокрутку по страницам. Включите эту опцию, чтобы разрешить горизонтальную прокрутку.
  • Use Proxy: По умолчанию FlutterFlow маршрутизирует получение PDF через прокси в режимах Run Mode и Test Mode, чтобы избежать проблем с CORS (Cross-Origin Resource Sharing). Отключите это, если вы не хотите, чтобы запрос PDF маршрутизировался через прокси.
  • Use Custom Proxy URL: Если вам нужен конкретный прокси, включите эту опцию и укажите свой URL прокси вместо стандартного прокси FlutterFlow.

Web Access for PDFs and Other Files​

Некоторые типы файлов требуют дополнительной настройки для доступа в веб. В частности, PDF Viewer требует файлов, размещённых в сети (таких как загруженные PDF), чтобы разрешить Cross-Origin Resource Sharing (CORS). Для более глубокого понимания Cross-Origin Resource Sharing (CORS) вы можете обратиться к этому руководству.

Ключевой вывод в том, чтобы разрешить пользователям загружать и просматривать PDF с помощью Firebase Storage, следуйте шагам ниже.

Вам потребуется выполнить несколько команд, чтобы включить CORS для вашего проекта Firebase. Опыт программирования не требуется, но если вы знакомы с Firebase, вы можете обратиться к официальному руководству здесь: Firebase CORS Configuration.

Step 1: Find Your Firebase Project ID

Вы можете найти ID проекта Firebase в FlutterFlow > Settings and Integrations > Firebase. Скопируйте Firebase Project ID.

copy-firebase-project-id.avif

Step 2: Open Cloud Shell in Google Cloud Console

  1. Перейдите по следующей ссылке, заменив FIREBASE_PROJECT_ID на фактический ID вашего проекта:
https://console.cloud.google.com/home/dashboard?cloudshell=true&project=FIREBASE_PROJECT_ID
  1. Если потребуется, нажмите Continue.
  2. В нижней части экрана вы увидите терминал. Если ID вашего проекта не отображается жёлтым, нажмите на down arrow (🔽) рядом с именем проекта и выберите правильный проект Firebase.

cloud-shell

Step 3: Run the CORS Configuration Command

  1. Нажмите на терминал Cloud Shell (чёрный экран).
  2. Скопируйте и вставьте следующую команду, заменив <your-cloud-storage-bucket> на фактическое имя вашего хранилища. Чтобы найти имя хранилища Firebase Storage, перейдите в Firebase Console > Storage > в верхнем левом углу вы увидите URL вашего хранилища, который обычно следует формату 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 (или Return), чтобы выполнить команду.
  2. Если потребуется, нажмите Authorize, чтобы разрешить Cloud Shell доступ к вашему проекту Firebase.
  3. После успешного выполнения команды вы увидите сообщение подтверждения.

cors-3

BlurHash​

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

blurhash.avif

Вот шаги для генерации и использования BlurHash:

  1. При использовании действия Upload/Save Media для загрузки изображений вы можете включить опцию Include Blur Hash. Эта настройка автоматически генерирует строку BlurHash для загруженного изображения.

enable-blurhash.avif

  1. После генерации BlurHash рекомендуется хранить его вместе с URL изображения в базе данных (например, Firestore). Сгенерированный BlurHash доступен через Widget State > Uploaded Local File > Media Blur Hash. Этот подход гарантирует, что URL изображения и соответствующий BlurHash будут легко доступны при необходимости.

save-blurhash.avif

  1. Чтобы использовать BlurHash в качестве заглушки, в свойствах виджета Image включите опцию Use Blur Hash и затем установите значение Blur Hash String из переменной.

use-blurhash.avif

Best Practices​

  • Включите бесконечную прокрутку (отложенную загрузку) в списках, чтобы загружать дополнительный контент по мере прокрутки пользователя, а не загружать все данные сразу.
  • Используйте встроенный менеджер кэша FlutterFlow, который автоматически обрабатывает кэширование изображений.
  • Реализуйте локальное кэширование для хранения часто запрашиваемых данных на устройстве, что уменьшит необходимость повторных сетевых запросов.
  • Уменьшите количество сетевых вызовов, запрашивая только необходимые данные и используя стратегии кэширования.
  • Убедитесь, что запросы к базе данных эффективны и извлекают только данные, необходимые для отображения.
  • Используйте BlurHash для отображения размытого предварительного просмотра изображений во время их загрузки, что улучшит пользовательский опыт.
  • Отображайте индикаторы загрузки, чтобы информировать пользователей о том, что данные запрашиваются, что улучшит воспринимаемую производительность.