Сборка раскладки
Страница во FlutterFlow собирается из виджетов. Одни видны на экране — Text, Button, Image, Icon. Другие невидимы и только расставляют первых по местам: Container, Row, Column, Stack.
Все они разложены по четырём категориям: Layout Elements, Base Elements, Page Elements и Form Elements. Экран — это комбинация виджетов из разных категорий.
Основная идея
Почти любая раскладка сводится к тому, чтобы поставить виджеты друг под другом или в ряд. По вертикали это делает Column, по горизонтали — Row. Если один виджет должен лежать поверх другого, берут Stack.
Умение складывать виджеты друг в друга — основной навык вёрстки во FlutterFlow: из этого получаются и простые экраны, и сложные. Подробнее про Row, Column и Stack.
Разбор на примере
Соберём вот такой экран:
Четыре шага:
1. Разметить макет
Пока опыта немного, этот шаг важнее остальных: до того как тащить виджеты на холст, нарисуйте, из каких блоков состоит экран.
Для нашего макета разбивка выглядит так:
Дальше каждому блоку подбирается виджет — Column, Row или Stack. Внешняя секция здесь становится Column и делится на блоки поменьше; те, если нужно, делятся дальше. Дробить стоит до тех пор, пока каждому куску не найдётся один подходящий виджет.
Более мелкое дробление:
У страницы может быть только один корневой виджет: два контейнера на одном уровне внутри HomePage не поставить. Их нужно обернуть в Column — он и станет единственным родителем.
2. Секция с картинкой
Верхний блок — это Image и IconButton. Чтобы кнопка легла поверх картинки, оба виджета оборачиваются в Stack:
3. Секция с описанием
Здесь всё просто: несколько виджетов Text внутри Column.
4. Секция с отзывами
Блок отзывов сложнее. Сначала Column отделяет данные автора (аватар и имя) от текста отзыва. Внутри данные автора выстраиваются в Row из CircleImage и Text:
Другие виджеты вёрстки
Кроме Row, Column и Stack при сборке экрана постоянно нужны: