[sheet] Show cupertino modal?

[itsJoKr]

I really like the direction sheet is going and how it can work with Navigator2.

The only reason I use modal_bottom_sheet is for iOS-styled modals, which you can achieve with modal_bottom_sheet (but not in Navigator2-friendly way). I didn't find any example of this with sheet. Is it possible to do it?

Example of what I'm talking about:

[cancng]

Same here, I'm trying to get this animation.

https://www.hackingwithswift.com/img/books/quick-start/swiftui/how-to-present-a-new-view-using-sheets-1.mp4

[bahadurh]

@cancng were you able to create this animation? I m not able to create it :(

[cancng]

@bahadurh No, I couldn't. In React Native, this presentation type is pageSheet, but I couldn't find it in Flutter. 😦

[paldepind]

You can achieve this do this using CupertinoSheetRoute or CupertinoSheetPage. It's briefly alluded to in the docs.

I'm using go_router and was able to create an iOS-style modal by following this example. The key thing is that you need to use pageBuilder in go_router to build your normal/non-modal pages with CupertinoExtendedPage (if you don't do this the underlying page won't animate into the background) and similarly you need to use pageBuilder to build you modal page with CupertinoSheetPage. Here's an example of what it looks like from my app:

GoRoute(
  path: '/timer',
  pageBuilder: (BuildContext context, GoRouterState state) =>
      const CupertinoExtendedPage(child: StartTimerScreen()),
  routes: <RouteBase>[
    GoRoute(
      path: 'select-tags',
      pageBuilder: (BuildContext context, GoRouterState state) =>
          const CupertinoSheetPage(child: SelectTagsScreen()),
    ),
  ],
),

Additionally, if you build the example app and go to the "Route" tab you'll see a bunch of examples that showcase various ways to use an iOS-style modal. Many of these don't use go_router and thus show how to create the modal using the vanilla navigator API.

[hectorAguero]

as the 1.0 version, the package doesn't have a fit property exposed inside CupertinoSheetPage so the modal always use the full height of the screen.

I ended up making a copy of CupertinoSheetPage and exposed the variable, not sure if there's a reason for that.

Also there are some issues with padding and Safearea