Нижняя панель

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

Берут её тогда, когда под небольшое действие заводить отдельный экран не хочется: выбрать вариант, подтвердить, ввести пару полей.

Два вида действия

1. Show — открыть панель.
2. Dismiss — закрыть её.

Открытие

1. Сначала соберите компонент — содержимое панели. :::tip Можно взять готовый: в шаблонах есть раздел BottomSheet. :::

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

3. Выберите Actions в панели свойств и нажмите + Add Action.

4. Найдите действие Bottom Sheet в группе Widget/UI Interactions.

5. Выберите Show.

6. В Select Component укажите созданный компонент.

7. При необходимости задайте Height — если панель должна занимать только часть экрана.

8. Background и Barrier Color задают цвет самой панели и затемнения под ней.

   

9. Компоненту можно передать параметры.

10. По умолчанию следующее действие в потоке ждёт, пока панель закрыта не будет. Если ждать не нужно — скажем, вызов API должен уйти сразу после открытия панели, — включите Non Blocking.

11. Панель закрывается кликом вне её границ. Переключатель Non Dismissble это запрещает.

12. Enable Drag разрешает открывать и закрывать панель смахиванием.

13. Если панель возвращает значение, задайте Action Output Variable Name — в эту переменную и попадёт результат.

Закрытие

1. Выделите виджет внутри панели — кнопку, ListTile, контейнер.
2. Выберите Actions в панели свойств и нажмите + Add Action.
3. Найдите действие Bottom Sheet в группе Widget/UI Interactions.
4. Выберите Dismiss.
5. Чтобы вернуть значение на страницу, включите Has Value и задайте его Data Type и Value Source.
   1. После этого вернитесь к действию, которое открывает панель, и заполните Action Output Variable Name.
   2. Через эту переменную значение и читается.

Пример с возвратом выбранного имени пользователя: