Search code examples
iosflutterflutter-layoutflutter-animation

iOS style bottom sheet background in flutter [no extra packages]


When you open a modal bottom sheet in iOS, the previous background (the page before open the modal) has an animation, it goes thinner and seems the page and the modal build a stack of pages.

I know how to open a modal bottom sheet in flutter, but I don't know how to animate the previous page like native iOS does. I used to use this package: https://pub.dev/packages/modal_bottom_sheet (in particular I use the first example: Cupertino modal). I'd like to achieve the same animation without use any package.


old question: I'm trying to achieve this effect for the modal bottom sheet like native iOS does (I refer to the page under the modal) I used to use a package but this time I'd like to do it without any installation. Do you know if it is possible?

ios bottomsheet example


Solution

  • go to github, go to examples, and find this code in the main file:

    showCupertinoModalBottomSheet( expand: true, context: context, backgroundColor: Colors.transparent, builder: (context) => ModalFit(), ))

    You also need to make sure your parent screen is gonna be kept alive.