Круглое изображение

Виджет CircleImage используется для отображения кругового изображения из загруженных активов или ссылки URL. Виджет CircleImage может отображать различные типы изображений, такие как JPEG, PNG, GIF, анимированный GIF, WebP, анимированный WebP, BMP и WBMP.

Вот как вы можете добавить виджет CircleImage в свой проект:

• Перетащите виджет CircleImage с вкладки Base Elements (на панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение«.
• Найдите свойство Path и введите URL—адрес нового изображения.
• Найдите внизу флажок Кэш, нажмите на него, чтобы установить флажок. Включение кэша позволит сохранить изображение и отображать его даже при отсутствии доступа к интернету.

Здесь приведены инструкции по изменению типа изображения.

Панель свойств можно использовать для настройки внешнего вида и поведения виджета.

Здесь приведены инструкции по добавлению отступов.

Здесь приведены инструкции по настройке выравнивания.

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

Чтобы изменить размер круглой формы изображения, выполните следующие действия:

• Выберите изображение CircleImage в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение«.
• Найдите свойство Radius.
• Изменить размер изображения можно тремя способами:
  • Чтобы установить точный размер, выберите PX и введите нужные значения.
  • Чтобы задать размеры в % от размера экрана, выберите % и введите нужное значение.

Изменение значения Box Fit позволяет контролировать отображение изображения внутри виджета CircleImage. Различные опции свойства Box Fit помогают масштабировать (увеличивать или уменьшать в размере) изображение внутри виджета CircleImage.

Чтобы изменить значение Box Fit:

• Выберите CircleImage в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение«.
• Найдите выпадающий параметр Box Fit, попробуйте изменить его на другие значения, чтобы получить идеальное изображение.

Инструкции по отображению изображения CircleImage на весь экран находятся здесь.

Чтобы выполнить какое-либо действие по щелчку на изображении CircleImage, добавьте действие в FlutterFlow. Инструкции по добавлению действия вы можете найти здесь.

Чтобы отобразить данные, извлеченные из коллекции Firestore, и документ в виджете CircleImage, убедитесь, что вы:

• Понимаете структурирование базы данных Firebase.
• Выполнили все шаги в разделе «Настройка Firebase» для вашего проекта.
• Извлекли данные из коллекции или документа.
• Наконец, чтобы отобразить данные в виджете CircleImage, выполните следующие шаги.

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь