modal_bottom_sheet 0.1.1 modal_bottom_sheet: ^0.1.1 copied to clipboard
Create flutter advanced modal bottom sheets. Material, Cupertino or your own style
Flutter Modal Bottom Sheet #
Create awesome and powerful modal bottom sheets
Cupertino Modal | Multiple Modals | Material Modal | Bar Modal | Create your own |
---|---|---|---|---|
Material Modal BottomSheet #
showMaterialModalBottomSheet
Improved showModalBottomSheet that support scroll and drag at the same time.
Cupertino Modal BottomSheet #
iOS 13 came with an amazing new modal navigation and now it is available to use with Flutter.
OPTION 1. Recommended. #
- use
showCupertinoModalBottomSheet
MaterialPageRoute
does not allow animated translation for routes that are notMaterialPageRoute
orCupertinoPageRoute
. For this we createdMaterialWithModalsPageRoute
that needs to replace the route you are using now. Notice this route type works the same asMaterialPageRoute
and will support customPageTransitionsTheme
.
OPTION 2. #
- Wrap previous page inside a
CupertinoScaffold
. - Call
CupertinoScaffold.showCupertinoModalBottomSheet(context:context, builder: ...)
This two methods won't work together.
It supports native features as bouncing, blurred background, dark mode, stacking modals and inside navigation.
For stacking modals call showCupertinoModalBottomSheet
inside a modal;
For inside navigation use a CupertinoTabScaffold or a Navigator.
Also it support flutter features as WillPopScope.
Build other BottomSheets #
Try showBarModalBottomSheet
for a bottomSheet with the appearance used by Facebook or Slack
Check in the example project showAvatarModalBottomSheet
for how to create your own ModalBottomSheet
Roadmap #
- ❌
Support closing by dragging fast on a modal with a scroll view.
- ❌
Improve animation curves when user is not dragging.
- ❌
Allow to set the initial size of the bottom sheet
- ❌
Support hero animations