Пользовательская навигация поверх других виджетов, таких как Uber

Question

Хорошо, тогда то, что я хотел сделать, может быть объяснено на примере приложения uber, когда вы открываете uber на домашней странице и получаете меню

1), где вы хотите go

2) цена детали и какие кабины доступны

3) тогда вы хотите и все и вариант поездки

что стоит отметить, что карта остается постоянной и меняется только меню, мы можем рассматривайте эти меню как маршруты и потенциально можете видеть изменяющиеся меню при перемещении между ними,

сначала пробовал со стеком с MapView и Navigator внутри него, но поскольку навигатор отображает PageRoutes, которые занимают полный экран, я не могу взаимодействовать с картой, потому что это какой-то обходной путь для этого

, затем я реализовал это с помощью стека и затем вложив IndexStack, теперь всякий раз, когда изменяется индекс indexedStack, я могу отображать другой компонент, но стек индекса сохраняет состояние, которое мне не нужно

body: SafeArea(child: Stack( fit: StackFit.expand,
          children: <Widget>[
            MapView(),
            IndexedStack(
                index: i,
                children: <Widget>[
                  PageOne(onPressed: () {setindex(1);}),
                  PageTwo(onPressed: () {setindex(0);}),
                ],
              ),
            ]
          )),

можете ли вы предложить мне другой способ его реализации

Ride select View

Вид поиска

Вид Ride Unavailable

вот как выглядят различные страницы, вы можете видеть, что mapView остается постоянным, но контейнеры над ним меняются, когда мы go переходим с одной страницы на другую