Размытие

Виджет Blur используется для размытия своего дочернего или родительского виджета. С помощью этого виджета можно создать эффект матового стекла, обычно наблюдаемый в iOS.

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

• Сначала перетащите виджет Blur с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Теперь добавьте виджет «Изображение» внутрь виджета «Размытие«. Настройте изображение в соответствии с вашими требованиями.

По умолчанию виджет Blur добавляет эффект размытия к дочернему виджету. Например, если вы добавите виджет изображения в качестве дочернего виджета виджета Blur, вы увидите эффект на изображении. Но иногда вам может понадобиться создать эффект размытия на родительском виджете виджета Blur.

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

• Сначала добавьте виджет Container. Перейдите на панель свойств, установите его ширину на Inifinity и высоту на 200. Также установите его фоновое изображение.
• Внутри контейнера добавьте виджет «Размытие«.
• Теперь добавьте виджет «Текст» внутрь виджета «Размытие» и переместите его в центр, изменив выравнивание.
• Наконец, выберите виджет «Размытие» в дереве виджетов или в области холста. Перейдите на панель свойств, прокрутите вниз до раздела «Свойства размытия» и включите тумблер «Задний план«. Этот переключатель решает, добавлять ли эффект размытия к родительскому или дочернему виджету. Если он включен, будет размыт родительский виджет, а если выключен, эффект размытия будет наложен на дочерний виджет.

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

• Во-первых, добавьте виджет Container. Перейдите на панель свойств, установите его ширину на Inifinity и высоту на 200. Также установите его фоновое изображение.
• Добавьте виджет Column (внутри контейнера) и установите его выравнивание по главной оси в конец.
• Добавьте виджет «Размытие» (внутри колонки).
• Добавьте виджет Container (внутри Blur) и установите его ширину на бесконечность, а высоту на 50. Также сделайте фон контейнера прозрачным примерно на 40%, выбрав Цвет заливки и переместив второй ползунок влево.
• Добавьте виджет «Текст» (внутри контейнера) и переместите его в центр, изменив выравнивание.
• Наконец, выберите виджет «Размытие» в дереве виджетов или в области холста. Перейдите на панель свойств, прокрутите вниз до раздела Свойства размытия и включите тумблер Backdrop. Этот переключатель решает, добавлять ли эффект размытия к родительскому или дочернему виджету. Если он включен, будет размыт родительский виджет, а если выключен, эффект размытия будет наложен на дочерний виджет.

Вы можете настроить поведение этого виджета с помощью различных свойств, доступных на панели свойств.

Сила размытия — это размытие, добавляемое к виджету. Данный виджет добавляет силу размытия, используя свойства Sigma X и Sigma Y. Sigma X задает силу размытия в горизонтальном направлении, а Sigma Y — в вертикальном. Более высокие значения Sigma X и Y увеличивают размытость, в то время как установка их на 0 полностью устраняет размытость.

Чтобы изменить силу размытия:

• Выберите виджет «Размытие» в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства размытия«.
• Измените значения в полях ввода Sigma X и Sigma Y.

Чтобы показать или скрыть эффект размытия:

• Выберите виджет «Размытие» в дереве виджетов или в области холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела Свойства размытия.
• Установите/снимите флажок в свойстве «Применять размытие«, чтобы показать/скрыть эффект размытия. Вы также можете установить это значение из переменной, например, переменной Local State, переменной ответа API или документа Firestore, нажав на Set from Variable.

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

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