Flutter: How can I implement this type of bottom sheet in my flutter app?

Question

I want this type of Cupertino modal bottom sheet?

Flutter (Channel stable, 3.10.5, on macOS 13.4.1 22F82 darwin-arm64, locale en-IN) Android toolchain - develop for Android devices (Android SDK version 34.0.0) Xcode - develop for iOS and macOS (Xcode 14.3.1) Chrome - develop for the web Android Studio (version 2022.2) VS Code (version 1.79.2) Connected device (4 available) Network resources

modal_bottom_sheet: ^2.1.2 this package is not working with flutter 3.10.5

https://pub.dev/packages/modal_bottom_sheet

Answer 1

You can use this package which worked for me. https://pub.dev/packages/sliding_up_panel In the body, I am returning a Stack which contains two widgets: The one behind the panel (Container) and the panel itself as below.

 body: Stack(
      children:[
        Container(), // set the contents behind the panel
        Align(
          alignment: Alignment.bottomCenter,
          child: SlidingUpPanel(
             color: Colors.white, //set the panel color
             minHeight: MediaQuery.of(context).size.height / 2, //set min height
             maxHeight: 750, // set desired max height when expanded
             borderRadius: const BorderRadius.only( // border decorations
                 topLeft: Radius.circular(24.0),
                 topRight: Radius.circular(24.0),
               ),
             panel: Column(...), // contents of the panel
          ),
        ),
      ],
    )

Let me know if this helps :)

Answer 2

you can call showModalBottomSheet from any stateful or stateless widget providing the context, this one comes in the material part of flutter, no need to use extra packages

 showModalBottomSheet(context: context, builder: builder)

Answer 3

Packages to get this done.

• modal_bottom_sheet: 3.0.0-pre (The stable version do not support latest versions of the flutter)
• cupertino_modal_sheet

Demo:

modal_bottom_sheet	cupertino_modal_sheet