Implement transition between navigation page widget and modal route

[sagnik-sanyal]

Given the video below to demonstrate the transition

VID_20241022175607.mp4

How to transition from a bottom sheet inside stack to a floating close button modal scrollable page dynamically, would help a lot as this package is fairly new but seems it has a lot of potential for adjusting to any usecase.

[fujidaiti]

Hi @sagnik-sanyal,

How to transition from a bottom sheet inside stack to a floating close button modal scrollable page dynamically

You can use NavigationSheet for this use case. Here's a rough outline of the widget tree:

Stack
|-- Map widget
|-- Barrier widget (a translucent black background, visible only when the select-location-page is shown)
|-- NavigationSheet
    |-- Location detail page
    |-- Select location page

The following examples would be helpful:

• https://github.com/fujidaiti/smooth_sheets/blob/main/example/lib/tutorial/declarative_navigation_sheet.dart
• https://github.com/fujidaiti/smooth_sheets/blob/main/example/lib/tutorial/imperative_navigation_sheet.dart
• https://github.com/fujidaiti/smooth_sheets/blob/main/example/lib/tutorial/navigation_sheet_and_keyboard.dart

---

Since the persistent sheets don't have a barrier, you'll need to create it yourself. I'm planning to include this feature in the next release (v0.11.0). As for the floating button above the sheet, see #3.

[fujidaiti]

there is one more thing that the close button seems to be not rendered outside the boundaries of the bottom sheet.

Any screenshot? I think this is the intended behavior, so we need to handle that kind of widgets in a special manner as mentioned in #3.

[sagnik-sanyal]

there is one more thing that the close button seems to be not rendered outside the boundaries of the bottom sheet.

Any screenshot? I think this is the intended behavior, so we need to handle that kind of widgets in a special manner as mentioned in #3.

I mean if widgets are placed outside contents of the boundaries using stack and using positioned then the widgets outside seem to not render ( which seems intended ) but sometimes that kind of ui is required. If using Transform.translate can I have a small widget tree sample in that usecase ?

[fujidaiti]

If using Transform.translate can I have a small widget tree sample in that usecase ?

Hmmm, I'm not sure. I'll take a closer look this weekend, but I think there needs to be a way to customize the clipping behavior of the sheet.