modal bottom sheet
flutter | create advanced modal bottom sheets. material, cupertino or your own style .
cupertino modal | multiple modals | material modal | bar modal | create your own |
---|---|---|---|---|
first steps
how to install it? follow instructions
material modal bottomsheet
showmaterialmodalbottomsheet(
context: context,
builder: (context, scrollcontroller) => container(),
})
what to use this over flutter showmodalbottomsheet
?
showmaterialmodalbottomsheet
supports closing bottoms sheets by dragging down even if there is a scrollview inside.
showmodalbottomsheet
won’t work correctly with scrollviews
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 enabledrag parameter specifies if the bottom sheet can go beyond the top boundary while dragging |
material params
the optional backgroundcolor
, elevation
, shape
, and clipbehavior
parameters can be passed in to customize the appearance and behavior of material bottom sheets.
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, scrollcontroller) => 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
andcupertinopageroute
do not allow animated translation to/from routes that are not the same type.
there are two options:
option 1. recommended.
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 change my route class? see cases:
- using navigator.of(context).push
navigator.of(context).push(materialpageroute(builder: (context) => container()));`
replace it with
navigator.of(context).push(materialwithmodalspageroute(builder: (context) => container()));
using ongenerateroute
parameter of materialapp
, cupertinoapp
or navigator
ongenerateroute: (settings) {
...
return materialpageroute(settings: settings, builder: (context) => container());
},
replace it to
ongenerateroute: (settings) {
...
return materialwithmodalspageroute(settings: settings, builder: (context) => container());
},
using pageroutebuilder
parameter of widgetapp
pageroutebuilder: <t>(routesettings settings, widgetbuilder builder) => materialwithmodalspageroute<t>(settings: settings, builder: builder)
using routes
parameter from materialapp
or cupertinoapp
unfortunately this routes are materialpageroute
and cupertinopageroute
respectively and cannot be changes.
you can change the way you call the previous route with one of the previous methods or try option 2
option 2.
- wrap previous route inside a
cupertinoscaffold
.
example withroutes
parameter frommaterialapp
orcupertinoapp
routes: <string, widgetbuilder>{
'/previous_route_where_you_push_modal': (buildcontext context) => cupertinoscaffold(body: container()),
},
- push modal with this method
cupertinoscaffold.showcupertinomodalbottomsheet(context:context, builder: (context) => container())
these two options won’t work correctly together.
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 two option)
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
check in the example project showavatarmodalbottomsheet
for how to create your own modalbottomsheet
questions
ask a question and ping me @jamesblasco
found an issue or have a proposal?
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 pull request #2
Comments are closed.