Create awesome and powerful modal bottom sheets.
Demo



Try it
Explore the Web Demo or clone the repository.
Why not showModalBottomSheet
?
Inspired by showModalBottomSheet
, it completes with some must-need features:
- Support for inside scrollview + dragging down to close (
showModalBottomSheet
won’t work correctly with scrollviews. - Support for
WillPopScope
to prevent closing the dialog. - Support for scroll to top when tapping status bar (iOS only)
- Cupertino modal bottom sheet
- Create custom modal bottom sheet
First Steps
How to install it? Follow Instructions
Material Modal BottomSheet
showMaterialModalBottomSheet( context: context, builder: (context) => Container(), )
Generic params for all modal bottom sheets
Param | Description |
---|---|
bool expand = false | The expand parameter specifies id the modal bottom sheet will be full screen size or will fit the content child |
bool useRootNavigator = false | The useRootNavigator parameter ensures that the root navigator is used to display the bottom sheet when set to true . This is useful in the case that a modal bottom sheet needs to be displayed above all other content but the caller is inside another Navigator . |
bool isDismissible = true | The isDismissible parameter specifies whether the bottom sheet will be dismissed when user taps on the scrim. |
Color barrierColor | The barrierColor parameter controls the color of the scrim for this route |
bool enableDrag = true | The enableDrag parameter specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards. |
AnimationController secondAnimation | The secondAnimation parameter allows you to provide an animation controller that will be used to animate push/pop of the modal route. Using this param is advised against and will be probably removed in future versions |
bool bounce = false | The bounce parameter specifies if the bottom sheet can go beyond the top boundary while dragging |
Duration duration = const Duration(milliseconds: 400) | The duration of modal opening |
double closeProgressThreshold = 0.6 | The closeProgressThreshold specifies when the bottom sheet will be dismissed when user drags it. |
Material params
The optional backgroundColor
, elevation
, shape
, and clipBehavior
parameters can be passed in to customize the appearance and behavior of material bottom sheets.
Using it with a scroll view inside
Assign the ModalScrollController.of(context)
to your primary modal to sync the scroll with the modal’s drag
showMaterialModalBottomSheet( context: context, builder: (context) => SingleChildScrollView( controller: ModalScrollController.of(context), child: Container(), ), );
Cupertino Modal BottomSheet
iOS 13 came with an amazing new modal navigation and now it is available to use with Flutter.
showCupertinoModalBottomSheet( context: context, builder: (context) => Container(), )
See generic paramameter in the Material section above
Cupertino specific params
The optional backgroundColor
parameters can be passed in to customize the backgroundColor cupertino bottom sheets. Useful if you want a blurred transparent background as the example Cupertino Photo Share
CAUTION!: To animate the previous route some changes are needed.
Why? MaterialPageRoute
and CupertinoPageRoute
do not allow animated translation to/from routes that are not the same type.
Replace your current route class with MaterialWithModalsPageRoute
.
Notice this route type behaves the same as MaterialPageRoute
and supports custom PageTransitionsBuilder
and PageTransitionsTheme
. How can I replace my current route?
Is there an alternative in case I can’t change my current route? Yes! Learn how to animate previous route with CupertinoScaffold:
It supports native features as bouncing, blurred background, dark mode, stacking modals and inside navigation.
Push new views inside the modal bottom sheet
a. If you want to push a new modal bottom sheet just call showCupertinoModalBottomSheet
again (works with both options)
b. For inside navigaton add a new Navigator
or CupertinoTabScaffold
inside
c. Also it supports flutter features as WillPopScope to prevent the modal bottom to be closed.
Build other BottomSheets
Try showBarModalBottomSheet
for a bottomSheet with the appearance used by Facebook or Slack
