How to utilize iOS bottomsheet transition with auto_route?

[gidrokolbaska]

Hi! As the title says, how can we use iOS transition where previous route is animated as well using the auto_route package? Couldn't find any info online

[mariopepe]

@gidrokolbaska hi! I can help, as I use the iOS animation (meaning the modal appearing from the bottom over the background becoming smaller and showing a uniform color around) and auto_route.

In order to achieve this you need to insert in your parent scaffold a CupertinoScaffold:

...
Scaffold(
  body: CupertinoScaffold(
       body: SomeOtherWidget()
   )
)

Then in SomeOtherWidget you can have a button for instance that opens the Cupertino Modal like so:

...
      onPressed: () async {
        await CupertinoScaffold.showCupertinoModalBottomSheet<void>(
          context: context,
          backgroundColor: Colors.transparent,
          shadow: const BoxShadow(color: Colors.transparent),
          builder: (context) => YourModalWidget(), 
        );
      },

Let me know if it works! 😊

[gidrokolbaska]

@gidrokolbaska hi! I can help, as I use the iOS animation (meaning the modal appearing from the bottom over the background becoming smaller and showing a uniform color around) and auto_route.

In order to achieve this you need to insert in your parent scaffold a CupertinoScaffold:

...
Scaffold(
  body: CupertinoScaffold(
       body: SomeOtherWidget()
   )
)

Then in SomeOtherWidget you can have a button for instance that opens the Cupertino Modal like so:

...
      onPressed: () async {
        await CupertinoScaffold.showCupertinoModalBottomSheet<void>(
          context: context,
          backgroundColor: Colors.transparent,
          shadow: const BoxShadow(color: Colors.transparent),
          builder: (context) => YourModalWidget(), 
        );
      },

Let me know if it works! 😊

Hi! Well, I've read the docs of this package, but my question is how to do it with auto_route

[mariopepe]

@gidrokolbaska ahhh you mean that you do something like

await AutoRouter.of(context).push(const SomeWidget());

And you want that the animation used is the one of this package? is this what you mean?

If yes then it is not possible to integrate this into auto_route. The reason is that the transitionsBuilder used in auto_route (see more here) is significantly different from the method used by this package. You would need to reimplement it.

But also, I have hard times seeing why you would want to use a route with a bottom modal ??🤔 If you navigate to the user profile page, then well it can make sense, or to the product page from your e-commerce page. But with a bottom modal (specifically the one with iOS animation where you continue to show the background) you are just showing a large snackabr basically.

Maybe you have a good business reason for that and in that case I'd like to ask you which one is it, as we never chase to learn and I'd be curious to understand! Best!

[gidrokolbaska]

Understood. Will use your first variant then.

[AristideVB]

I think it would be useful to have the iOS animation accessible just like ModalBottomSheetRoute, so that it can be used with goRouter for example, @mariopepe there are many cases where you want to use a bottom sheet as a route.

@gidrokolbaska could you reopen this issue ? 🙏

---

EDIT : it seems like it can actually be done like this https://github.com/jamesblasco/modal_bottom_sheet/issues/367#issuecomment-1806835188 I will look into it

[gidrokolbaska]

Sure