Флаттер перетащите вниз, чтобы открыть страницу ModalRoute

Question

Привет, у меня есть такое приложение

Мой вопрос: как можно перетащить этот модальный маршрут на популярный маршрут?эту всплывающую страницу, которую я создаю из этого образца https://stackoverflow.com/a/51908876/10068765

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

Answer 1

Используются onVerticalDragStart и onVerticalDragUpdate, чтобы определить, перемещается ли указатель на positionDelta сумму за timeDelta время.Чтобы вызвать его, вам достаточно быстро провести пальцем вниз.

int initialDragTimeStamp;
int currentDragTimeStamp;
int timeDelta;
double initialPositionY;
double currentPositionY;
double positionYDelta;

void _startVerticalDrag(details) {
  // Timestamp of when drag begins
  initialDragTimeStamp = details.sourceTimeStamp.inMilliseconds;

  // Screen position of pointer when drag begins
  initialPositionY = details.globalPosition.dy;
}

void _whileVerticalDrag(details) {
  // Gets current timestamp and position of the drag event
  currentDragTimeStamp = details.sourceTimeStamp.inMilliseconds;
  currentPositionY = details.globalPosition.dy;

  // How much time has passed since drag began
  timeDelta = currentDragTimeStamp - initialDragTimeStamp;

  // Distance pointer has travelled since drag began
  positionYDelta = currentPositionY - initialPositionY;

  // If pointer has moved more than 50pt in less than 50ms... 
  if (timeDelta < 50 && positionYDelta > 50) {
    // close modal
  }
}

А на вашем GestureDetector:

GestureDetector(
  onVerticalDragStart: (details) => _startVerticalDrag(details),
  onVerticalDragUpdate: (details) => _whileVerticalDrag(details)
)

details относится к DragUpdateDetails и передает событиеинформация

Имейте в виду, что если модал включает в себя ListView или что-то еще, что блокирует жесты прокрутки, вы должны включить что-то вроде этого , чтобы продолжать получать их.

Answer 2

Я думаю, есть и другое решение для того же самого,

Вы можете использовать showModelBottomSheet, как показано ниже

showModalBottomSheet(
     context: context,
     builder: (BuildContext bc) {
     return Container();
});

Дизайн Container исходя из ваших требований, возможно, у вас есть решение.