Общие свойства виджетов

Часть настроек повторяется почти у каждого виджета. Разбираем их один раз здесь, чтобы дальше не возвращаться.

Видимость

Виджет не обязан быть на экране всегда — показом можно управлять из логики приложения и по размеру экрана.

Conditional

Conditional показывает или прячет виджет по условию. Так строятся персональные экраны: например, панель администратора видна только пользователям с соответствующей ролью.

Responsive

Responsive visibility привязывает показ к размеру экрана — телефон, планшет, десктоп. Каждый значок включает и выключает свою категорию.

Типичный случай — два разных меню в одном проекте:

• Меню для десктопа: широкое, прижато влево, включён только значок десктопа.
• Меню для телефона: выдвижная панель, включён только значок телефона.

Opacity

Opacity задаёт прозрачность виджета числом от 0 до 1: 0 — виджет невидим, 1 — полностью непрозрачен, 0.5 — просвечивает наполовину.

На этом строятся полупрозрачные кнопки, затемняющие подложки и мягкие переходы между темами.

Если включить Animated Opacity, изменение прозрачности будет не мгновенным, а плавным — по заданным длительности и кривой.

Padding

Padding — внутренний отступ: расстояние между содержимым виджета и его краем. Без него текст упирается в рамку, а на узких экранах вёрстка выглядит тесной.

Отступ задаётся в Properties Panel → Padding & Alignment → Padding, значения — в пикселях (логических).

Два варианта:

• Uniform Padding — одно значение на все четыре стороны.
• Independent Padding — своё значение сверху, снизу, слева и справа.

Если удобнее видео:

Alignment

Alignment определяет, где виджет встанет внутри родителя.

Настройка живёт там же: Properties Panel → Padding & Alignment → Alignment. Сетка 3×3 даёт девять позиций:

• Top Left
• Top Center
• Top Right
• Center Left
• Center (по умолчанию)
• Center Right
• Bottom Left
• Bottom Center
• Bottom Right

Кликните нужную точку — или введите координаты вручную, значениями от -1 до 1:

• X — положение по горизонтали: -1 прижимает влево, 0 центрирует, 1 прижимает вправо.
• Y — по вертикали: -1 вверх, 0 по центру, 1 вниз.

Add Testing Value Key

Value Key — уникальный идентификатор виджета для автотестов. На форме регистрации разумно назвать поля описательно: signupFirstNameField, signupEmailField, signupPasswordField, signupSubmitButton — тест находит элемент по ключу и не ломается от перевёрстки. Подробности — в руководстве по автотестам.

Ширина и высота

Размер выбранного виджета задаётся в Properties Panel тремя способами:

• PX — фиксированный размер в пикселях.
• % — доля от экрана или родительского контейнера.
• ∞ — занять всё доступное место по этой оси.

Размер можно тянуть и мышью — за маркеры на правой и нижней границах выделенного виджета. Во время перетаскивания рядом показываются текущие значения в пикселях.

Правка значений с клавиатуры

Числовое поле свойства меняется стрелками ↑ и ↓ — не приходится каждый раз стирать и вводить значение заново.

Выбор цвета

Кликните по текущему цвету в любом свойстве, которое принимает цвет, — откроется Color Picker. Задать оттенок можно четырьмя способами:

• Custom Color — выбрать точку на градиенте и подстроить её:
  • ползунком оттенка (радужная полоса) — базовый цвет;
  • ползунком прозрачности (шахматная полоса) — альфа-канал.
• RGB или HEX — ввести код вручную (например, #A489F5) или задать составляющие RGB. Значение Alpha (A) отвечает за прозрачность: 100% — полностью непрозрачный.
• Theme Colors — цвета темы приложения: Primary, Secondary, Background и остальные. Через них оформление остаётся единым, а смена палитры делается в одном месте.
• Set from Variable — цвет из логики приложения: например, фон зависит от выбранного элемента или от темы.

Копирование переменной

Собранное значение с условной логикой не нужно повторять руками — его можно скопировать целиком.

Откройте меню Set from Variable, нажмите на три точки и выберите Copy Variable. Затем перейдите в нужное свойство, откройте то же меню, нажмите Paste Variable и подтвердите.

Массовое редактирование

Свойства нескольких виджетов меняются разом. Если пять кнопок должны стать зелёными вместо синих, править каждую не нужно.

Удерживая Shift, кликните по всем нужным виджетам. В Properties Panel останутся только их общие свойства — изменения применятся ко всем сразу.

Картинки из Unsplash

Изображение можно подобрать прямо в редакторе — из Unsplash. Нажмите значок поиска в Properties Panel, введите запрос и выберите кадр.

UI Builder Display Value

У Text и RichText содержимое часто приходит из переменной, и на холсте виджет выглядит пустым. UI Builder Display Value — подставной текст, который виден только в редакторе FlutterFlow: в приложении на его месте окажется значение переменной.

Это позволяет оценить вёрстку — длину строки, отступы, выравнивание, — не отвязывая виджет от переменной.

Рамка

Рамку можно добавить почти любому виджету:

• Border Color — цвет; берётся из палитры темы (например, Primary), из подборщика или из переменной.
• Border Width — толщина в пикселях.
• Border Radius — скругление углов:
  • Independent Radius — своё значение для каждого угла;
  • Uniform Radius — одно на все, ползунком или числом.
• Button Padding — внутренний отступ между содержимым и рамкой.