Виджеты

Виджет — это элементарная единица интерфейса во FlutterFlow. Экран собирается из виджетов: простые вроде Text, Button и Container вкладываются в составные — Row, Column, ListView.

Ключевое здесь — отношение «родитель — потомок»: именно оно образует дерево виджетов, которое и задаёт структуру экрана.

Какие бывают виджеты

Встроенные. Готовый набор FlutterFlow — им посвящён весь этот раздел.
Компоненты. Собственные виджеты, которые вы складываете из встроенных мышью и переиспользуете по всему приложению.
Собственные виджеты. Когда готовых возможностей не хватает, виджет пишется кодом на Dart.
Виджеты темы. Оформление вынесено в тему: поменяли цвет или шрифт в одном месте — обновилось везде, где виджет темы используется.

Дерево виджетов показывает, как элементы страницы вложены друг в друга: от атомов вроде Text и Button до молекул и организмов — составных блоков. Это та же логика, что в атомарном дизайне: мелкое собирается в крупное, крупное — в законченный экран.

инфо

Разбор дерева виджетов

На схеме — дерево страницы ExamplePage:

ExamplePage — корень дерева, вся страница целиком.
- Column — главный компоновочный виджет страницы, выстраивает потомков сверху вниз.
  - Container — оборачивает один виджет и добавляет ему отступы, поля, рамку или фон.
    - Text — выводит строку внутри Container.
  - Row — выстраивает потомков слева направо, здесь в нём два значка.
    - Icon — по значку на каждое вхождение.
  - Image — картинка, вложена прямо в Column.
  - Button — кнопка, тоже прямо в Column.

У каждого виджета своя роль: одни выводят содержимое (Text, Image), другие расставляют его по экрану (Row, Column).

Так это же дерево выглядит в самом FlutterFlow:

Дерево — главный инструмент навигации по экрану. По нему видно, кто чей родитель, а значит, откуда виджет берёт ограничения по размеру и почему он выглядит именно так.

Виджеты во FlutterFlow разложены по четырём категориям:

Layout Elements — компоновка
Base Elements — базовые элементы
Page Elements — элементы страницы
Form Elements — поля ввода

Layout Elements

Задают структуру экрана: как остальные виджеты расставлены и в каком порядке отрисованы.

Виджет	Что делает	Пример
Row	Выстраивает потомков по горизонтали.
Column	Выстраивает потомков по вертикали.
Stack	Кладёт потомков слоями друг на друга — элементы могут перекрываться.
Container	Коробка вокруг одного виджета: отступы, поля, рамка, тень, фон.

Base Elements

То, из чего складывается видимая часть интерфейса.

Виджет	Что делает	Пример
Text	Выводит текст; настраиваются шрифт, размер, начертание.
Image	Показывает картинку.
Icon	Показывает значок.
Button	Запускает действие или ведёт на другой экран; настраиваются цвет, рамка и подпись.

Page Elements

Сюда входят AppBar, Floating Action Button (FAB), Drawer и End Drawer — каркас страницы и навигация по приложению.

инфо

Подробно об элементах страницы — AppBar, Snackbar, Drawer и остальных.

Form Elements

Поля ввода: из них собираются формы регистрации, входа и любого ввода данных.

Виджет	Что делает	Пример
Text Field	Ввод текста.
Radio Button	Выбор одного варианта из набора.
Dropdown	Выпадающий список: одно значение из многих.

Категории отвечают за разное — от внешнего вида до сбора данных, — но в дереве виджетов ведут себя одинаково: у каждого есть родитель, и от него зависит доступное место на экране.