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

Question

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

Chibouk

Did you find a solution? No matter what I use, the screen animation on the back doesn't happen. – Pico

Answer 1

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.

Willardwillcox

Answer 2

check this out

showModalBottomSheet(
        context: context,
        shape: const RoundedRectangleBorder( // <-- SEE HERE
          borderRadius: BorderRadius.vertical( 
            top: Radius.circular(25.0),
          ),
        ),
        builder: (context) {
          return SizedBox(
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                ...
              ],
            ),
          );
        });

Glib

Thanks for the answer. However I meant the content in the background, not the modal itself. When I open a modalbottomsheet I noticed in flutter it doesn't have the same animation of the native iOS, the background goes thinner, it is not a static background. – Chibouk

Note that the documentation states that it is important to set ‘onGenerateRoute’ in MaterialApp. Without this it will not work. – Obverse