Элементы страницы

Элементы страницы задают её каркас: от навигационных — AppBar и Drawer — до плавающей кнопки (FAB), к которой пользователь тянется в первую очередь. У каждого своё место в сценарии работы с экраном.

Что даёт странице Scaffold:

• AppBar — панель сверху: заголовок, кнопки навигации и действия.

• Плавающая кнопка (FAB) — кнопка главного действия экрана: добавить контакт, написать сообщение.

• Drawer и End-Drawer — выдвижное меню, которое открывается из AppBar или свайпом от края.

• Body — основная область, где живут виджеты страницы.

AppBar

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

AppBar состоит из трёх частей:

• Leading — обычно иконка меню или стрелка «назад». По умолчанию FlutterFlow подставляет подходящую иконку сам, если на странице есть Drawer или переход с включённым «Allow Back Navigation». Её можно заменить своим виджетом Icon.
• Title — название экрана или приложения: подсказка о том, где пользователь находится. Сюда можно поставить и другой виджет, если нужен нестандартный вид.
• Actions — иконки-кнопки справа: поиск, «поделиться» и остальное.

Как добавить AppBar

Кнопка по умолчанию

Переключатель «Show Default Button» в панели свойств AppBar отвечает за иконку в области Leading — стрелку «назад» или значок меню, — когда на странице возможен возврат или есть Drawer.

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

Хотите поставить в Leading свою иконку — см. добавление AppBar.

Плавающая кнопка (FAB)

Floating Action Button — круглая кнопка, парящая над содержимым. Её отводят под главное действие экрана: добавить запись, написать сообщение.

Свойство Extended

Расширенный вариант FAB показывает иконку вместе с подписью и поэтому крупнее обычного. Он нужен там, где одной иконкой смысл не передать: «Add Task», «Create Post».

Когда пригодится

Расширенный FAB уместен, если действие должно читаться сразу и однозначно, а места на экране достаточно, чтобы длинная кнопка не загромождала интерфейс.

Как добавить FAB на страницу

Боковые панели

Drawer — меню, выезжающее с края экрана. В нём держат навигацию по разделам и дополнительные настройки, не занимая место на основном экране.

Как добавить Drawer

End-Drawer

Точно так же на страницу добавляется End Drawer — панель, выезжающая с противоположной стороны.

Действие Drawer

Панель можно открывать и закрывать по нажатию: например, открывать кнопкой за пределами AppBar, а закрывать элементом внутри самой панели.

Виды действий

Доступны три действия:

• Open Drawer — открыть обычную панель.
• Open End Drawer — открыть панель с противоположной стороны.
• Close Drawers — закрыть все открытые панели.

Панель навигации (Nav Bar)

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

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

На странице настроек NavBar панель включается и настраивается: стиль отображения, порядок иконок, оформление.

Включение панели в настройках

В новом проекте панель навигации выключена. Включите её в Setting and Integrations > General > NavBar & AppBar, и только после этого добавляйте страницы.

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

Добавление страниц в панель

После включения выберите страницы, которые должны попасть в панель:

Свойства пункта панели

• Label — подпись пункта.
• Nav Bar Icon — иконка страницы в панели; её размер тоже настраивается.

Порядок пунктов

Чтобы переставить пункты местами:

• откройте Setting and Integrations > General > NavBar & AppBar > Nav Bar;

• в блоке Re-Order Page Icons найдите нужную страницу, возьмите её за иконку с тремя полосками и перетащите вверх или вниз.

Стиль панели

Изначально панель выглядит как стандартная Flutter Default Nav Bar. В выпадающем списке Nav Bar Style доступны и другие варианты.

Flutter Default Nav Bar

Стандартная панель в стиле Material. Подписи можно показывать или прятать отдельно для выбранного и невыбранных пунктов.

Свойства оформления

Google Nav Bar

Панель в современном стиле Google: подпись плавно появляется только у выбранного пункта.

Свойства оформления

• Nav Bar Color — фон панели.
• Selected Icon & Text Color — цвет иконки и текста выбранного пункта.
• Unselected Icon & Text Color — то же для невыбранных.
• Selected Background Color — фон выбранного пункта.
• Show Unselected Border — рамка вокруг невыбранных пунктов.
• Border Width — толщина рамки кнопок.
• Border Radius — скругление углов кнопок.
• Border Color — цвет рамки.
• Nav Button Padding — внутренние отступы кнопок.
• Nav Button Margin — внешние отступы кнопок.
• Nav Button Alignment — как кнопки распределяются внутри панели: по центру, с равными промежутками и так далее.
• Gap Between Icon and Text — расстояние между иконкой и подписью.
• Animation Duration (ms) — длительность анимации при переключении.
• Haptic Feedback — тактильный отклик при нажатии.

Floating Nav Bar

Панель как бы парит над содержимым и показывает подписи у всех пунктов.

Свойства оформления

• Nav Bar Color — фон панели.
• Selected Icon & Text Color — цвет иконки и текста выбранного пункта.
• Unselected Icon & Text Color — то же для невыбранных.
• Selected Background Color — фон выбранного пункта.
• Width — ширина панели.
• Border Radius — скругление углов.
• Elevation — тень под панелью, за счёт которой она и выглядит парящей.
• Button Border Radius — скругление углов кнопок.
• Nav Button Margin — внешние отступы кнопок.
• Nav Button Padding — внутренние отступы кнопок.

SnackBar

SnackBar — короткое сообщение, которое ненадолго появляется внизу экрана и говорит, чем закончилась операция.

Когда нужен SnackBar

Типичные случаи:

• Ответ на действие. Форма отправлена, файл загружен — или не получилось.
• Отмена. Быстрая возможность вернуть удалённое письмо или товар в списке.
• Информация. Короткое сообщение о синхронизации или проблемах с сетью, не требующее реакции.
• Подтверждение. Настройки сохранены, событие добавлено в календарь.

Как показать сообщение

Действие Show SnackBar

Material Design разрешает добавить в сообщение интерактивный элемент — так пользователь отвечает прямо из уведомления.

Свойство Add Action

В SnackBar помещается одна кнопка действия. Ей отдают самое очевидное продолжение: отменить удаление, повторить неудавшуюся отправку, восстановить прежнее состояние.

• Настройка. У кнопки задаются подпись, оформление и действие по нажатию. Уведомление при этом не просто информирует, а даёт что-то сделать.

• Время показа. Обычно SnackBar исчезает сам через несколько секунд. Но если в нём есть кнопка, человеку нужно успеть прочитать текст и среагировать — длительность стоит увеличить.

Действие Hide SnackBar

Показывать несколько сообщений одновременно нельзя — экран превратится в кашу. Поэтому во Flutter действует очередь:

Очередь. Если сообщения вызваны одно за другим, они показываются по очереди: следующее ждёт, пока исчезнет предыдущее.

Скрытие предыдущего. Когда новое сообщение должно заменить текущее немедленно, не дожидаясь автоскрытия, используйте действие Hide Snackbar.

У него есть область действия:

• Current Only — скрыть только текущее сообщение.
• All (Current and Queue) — скрыть текущее и всё, что стоит в очереди.

Это выручает, когда информацию нужно срочно поправить или заменить: обратная связь остаётся своевременной и не превращается в поток уведомлений.