Blur

Blur размывает вложенный виджет — или то, что находится под ним. Так смягчают картинки, прячут чувствительные данные и делают панели в духе матового стекла.

Как добавить

  1. Перетащите Blur из раздела Base Elements в палитре виджетов.
  2. Вложите в него виджет, который нужно размыть.
  3. Выделите Blur и настройте его в разделе Blur Properties.

Размытие фона

По умолчанию размывается содержимое виджета. Переключатель Backdrop меняет это: размывается то, что лежит под виджетом. Отсюда матовые панели, полупрозрачные подложки диалогов и навигация поверх контента.

совет

Для эффекта матового стекла положите внутрь Blur полупрозрачный виджет и включите Backdrop.

Настройки

Выделите Blur и откройте Blur Properties:

  • Sigma X — сила размытия по горизонтали.
  • Sigma Y — сила размытия по вертикали.
  • Backdrop — размывать то, что позади виджета, а не его содержимое.
  • Should Apply Blur — включатель эффекта. Через Set from Variable им можно управлять из логики приложения: например, размывать содержимое, пока пользователь не авторизовался.
  • Apply Clip — обрезать размытую область по прямоугольнику или кругу. Выключите, если обрезка не нужна.
  • Border Radius — скругление углов прямоугольной обрезки. Доступно, когда Apply Clip работает в прямоугольном режиме.

Чем больше Sigma X и Sigma Y, тем сильнее размытие. Оба значения в 0 полностью его снимают.

перевод официальной документации FlutterFlow

обновлено

ESC