Fullscreen details overlay with beamer location

Disclaimer: I'm a flutter beginner building a web only project!.

I have a screen which contains a set of items. Once one of those items is tapped, a full screen overlay should be displayed with more details about the item.

Functionally, would be very similar to this screenshot, but obviously with different content in both, the main page and the overlay.

Let's call this two screens ItemsWidget and ItemDetailsWidget. The later has a background opacity of 0.5, which means it should be translucent.

As I'm using beamer for navigation. I have declared the location /items for ItemsWidget and /items/:item_id for ItemDetailsWidget

The routing and setup works fine and I can navigate between the widgets.

However, when the ItemDetailsWidget is displayed (even with the translucent background), the ItemsWidget dissapears from underneath.

In the screenshot example, it would look something like this:

I understand ItemDetailsWidget it's replacing the entire screen content, but I would like to have it on top of ItemsWidget.

I guess this could be done with a Stack widget and two children widgets, but that would have to be in the same beamer location. I want to have to different beamer locations for url routing.

Any ideas or tips? is this even possible with beamer? Thank you

The answer to this question is to use a beamer dialog route as demonstrated in the following example.

https://github.com/slovnicki/beamer/blob/master/examples/books_dialogroute/lib/main.dart