Согласно Руководству по дизайну материалов, нижний лист - это виджет, предназначенный для отображения дополнительного контента, который привязан к нижней части экрана. Хотя полезно знать правила дизайна, чтобы использовать это, это не цель данной статьи. Для получения более подробной информации о принципах дизайна BottomSheet перейдите в Sheets: bottom - Material Design.
Теперь, когда вы знаете о BottomSheet, вы можете спросить себя: что такое ModalBottomSheet? Как мы используем их во Flutter?
Ну, сначала первые вопросы. Есть два вида BottomSheets: модальные и постоянные. Постоянный остается видимым, пока пользователь взаимодействует с экраном. Приложение GoogleMaps является примером этого.
С другой стороны, модальные не позволяют пользователям выполнять другие действия в приложении. Вы можете использовать их, чтобы подтвердить какую-либо операцию или запросить дополнительные данные, например спросить пользователя, сколько обмена ему потребуется, когда он делает заказ в приложениях электронной коммерции и т. Д.
В этой статье мы покажем, как его использовать, создав простое приложение для отслеживания веса, в котором мы можем отправить наш вес и увидеть наши предыдущие веса. Мы не будем вводить детали приложения, вместо этого мы перейдем непосредственно к реализации ModalBottomSheet.
Чтобы отобразить его, вам нужно будет вызвать showModalBottomSheet из контекста, в котором есть Scaffold, иначе вы получите сообщение об ошибке. Тем не менее, давайте приступим к созданию нашего листа.
Первое, что вам следует знать, это высота ModalBottomSheets по умолчанию равная половине экрана, и чтобы изменить ее, необходимо передать true аргументу isScrollControlled и вернуть виджет, который соответствует размеру, который мы ожидаем, поэтому давайте сделаем это.
Теперь нам нужно что-то добавить, чтобы наши пользователи могли вводить свой вес, давайте добавим TextInput и присвоим ему TextEditingController (таким образом, даже если наш лист неожиданно закрывается, когда пользователь открывает его снова, его значение все равно будет там).
Вроде неплохо, но теперь у нас проблема. Когда пользователь нажимает на нашу TextField, клавиатура оказывается над ней, почему? Что ж, это происходит потому, что наш лист не регулирует свое положение при открытой клавиатуре, мы могли бы увеличить наш лист, но это не решило бы нашу проблему, поскольку нам все еще нужно добавить поле, в которое пользователи могут вставить дату, которая они записали вес. Так какое же решение? Это просто, если клавиатура открыта, мы заставим наш лист располагаться над ней, мы можем добиться этого, задав нашему Container поле EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom, и мы получим следующий результат:
Это начинает выглядеть красиво, но не думаете ли вы, что было бы гладко, если бы мы добавили некоторый радиус к нашему листу? Давайте сделаем это, добавив shapeproperty, как показано ниже.
Круто, а теперь займемся нашим виджетом, чтобы выбрать дату. Обычно вы создаете виджет только для обработки этой логики и предоставления выбранных значений с помощью функции ValueChanged, но чтобы проиллюстрировать проблему, с которой вы можете столкнуться в будущем, давайте создадим всю логику внутри самого листа.
Важно отметить, что я добавил selectedDatevariable в наш HomePage State, так как вы можете увидеть ссылку на репозиторий, которую я дал в конце. Но теперь у нас есть проблема, хотя мы обновляем значение selectedDate, используя setState, наш OutlineButton по-прежнему показывает старое значение, пока мы снова не откроем наш лист, как вы можете видеть ниже.
Чтобы исправить это, нам нужно будет передать наш OutlinedButton в StatefulBuilder (или вы можете создать новый виджет и раскрыть изменения с помощью обратного вызова, как я сказал ранее, кстати, это более правильный подход).
И это последняя версия нашего ModalBottomSheet!
