Flutter Modal Bottom Sheet Tutorial

📗 Get the code from this tutorial 👇👇
resocoder.com/flutter-m-btm-s...
Screen sizes are changing, they're getting ever bigger and almost without any bezels. While having a bigger screen is awesome, users often cannot reach to the top of the screen with only one hand.
For us, developers, this means putting more controls to the bottom of the screen. This is true for both the app bars and navigation drawers.
In this tutorial we're going to focus on the bottom navigation drawer and we're going to implement it as a modal bottom sheet. We're also going to make it look nice and material with rounded corners.
Go to my website for more information, code examples and articles:
● resocoder.com
Follow me on social media:
● / resocoder
● / resocoder
● / resocoder
● gab.ai/resocoder

[@vadimosovsky]

2 things:
1) showModalBottomSheet has a shape param which lets you specify the radius without having to replicate the overlay color manually.
2) No need to hardcode the height when you use Column since you can set mainAxisSize to min.
I'm currently in search of another question: How can you configure opening and closing animation?

[@castleofvibe]

shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
)),

[@jesusmercado1283]

You have saved my f day. Thanks!!!!!!!!!

[@SameenIslam]

Thanks I had exactly those questions. I would also advise wrapping the container with a SafeArea to avoid having the bottom sheet buttons too close to the screen edge, which becomes a problem on phones such as iPhone X.

[@peter.wang__]

@@castleofvibe This is the right way to do it!!!

[@legardemontcho6739]

@Vadim perfect Answer. People should try to see into widget params and learn to understand it.

[@mariefast8217]

I really appreciated that you planned ahead for your video. You pasted code snippets in rather than typing. The results were a much more effective video. Thank you.

[@viveks.]

Helpful tutorial ❤️
Simplicity level of explaining things is just awesome

[@user-jt3yr1jv7t]

Thank you for making these tutorials.

[@kangwachimba1136]

great quality video and well explained

[@CarlosHenrique-th3qg]

Any way... really cool video :D Congrats

[@truecotz120]

Thanks, very helpfull.

[@Pedro5antos_]

Thanks!

[@sanilabraham5136]

Thank you☺

[@viharcontractor1679]

Great tutorial! You could've used Colors.transperant on the outer container, leaves out the hassle of trying to figure out the background color imo.

[@happysu493]

Saved my ash!

[@TenzinThinley]

Subscribed

[@double8tz]

how can i make it above bottom navigation bar as it appear to hide the bottom navigation bar

[@osmanacar782]

Hey, you can use showModalBottomSheet -> backgroundcolor, if you would do this, didn't need container color, thanks for tutorial

[@tannermeade]

The resocoder link in the description is broken.

[@laujimmy8635]

Please help!!! how do you show a bottom sheet dialog with textField in iOS ?
I know that showModelBottomSheet is only used in material, and it takes care of the keyboard height.
However it won't show up if I used CupertinoApp, anything is helpful, appreciated.

[@juliocesartorrescama5661]

Can you make one for ios 13 like one?, I found flutter_bottom_sheet but is not cupertino at all :(

[@marcelomagalhaes4508]

This is the only trick you need to make the white canvas transparent:
showModalBottomSheet(
backgroundColor: Colors.transparent,

[@prabinmaharjan5150]

how to display different set of information within showModalBottomSheet on tap of list item eg: cooling...i mean how to navigate to different class within showModalBottomSheet

[@vanvicka1]

what do you use for screen recording?

[@rivaldiwork]

is it possible to reload page after close modal bottom sheet?

[@Xsabino1]

@Reso Coder Hello man, a solution to the background is it
"void onButtonPressed() {
showModalBottomSheet(
>>-------------->backgroundColor: Colors.transparent,

[@raulmabe4229]

What happens if you set Column size to mainSizeAzis min? Would it be necessary to figure out the height?

[@aytunch]

I want to know this too. Setting a fixed height doe not seem optimal since it might look too small/big in different devices. Is there a way to automate that process?

[@raulmabe4229]

@@aytunch Yes it works with column size set to min!

[@bennyoffice8148]

Hi, Reso Coder your videos are great.
I tried your video to use showModalBottomSheet but I'm getting this error.
═══════ Exception caught by gesture ═══════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No Scaffold widget found.
It would be great if you could reply.

[@billywatsikenyere6656]

thanks for the tutorial , link for this tutorial to your website is broken

[@adamputra1874]

why my background is not greyed out?

[@kbyo2006]

Is possible load the bottom sheet only every first time that you open the App??? If it is possible, how can it do it??? I'm sorry but I'm starting... 😅 Thanks!!!

[@yasharma2301]

Use a final bool parameter.

[@loot6]

You should set the canvas colour to transparent rather than add another container to make the rounded corners show.

[@saguoran]

@Reso Coder, the link for the written tutorial gives me 404

[@rahultirkey7950]

What emulator is that? Is that the emulator provide by android studio or anything else?

[@CarlosHenrique-th3qg]

Just with the "shape" attribute

[@danielhalasz-szabo5143]

The background should be something transparent behind the rounded corners.

[@aytunch]

Is there a way to make the background of rounded corners real transparent instead of hacking it like the way you did? Because I have an image in the background and this solution does not work.

[@danielhalasz-szabo5143]

@@aytunch Have you tried color: Color(0x80000000) for the outer Container?

[@danielhalasz-szabo5143]

Or maybe 0x90000000

[@danielhalasz-szabo5143]

Finally I think I have found it. :) It is called barrierColor in bottom_sheet.dart. Colors.black54 You should use this for the outer Container. I hope it solves your problem.

[@AkashDivyaBatista]

the right method is to make the canvas color transparent just for bottom sheet modal. here in this video the right method to achieve that is demonstrated: ua-cam.com/video/yMQEdFuVRIk/v-deo.html

[@Fredrick422]

why not use the shape property to style shapes
showModalBottomSheet(
useRootNavigator: true,
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
),

[@dragon_warrior_]

TY♥

[@marcelomagalhaes4508]

I've create a repo with full code and improvements: github.com/maverickVision/flutter_custombottomsheet

[@ThelaazPvtLtd]

Code link is not working

[@prakashshekhar8346]

github.com/ResoCoder/flutter-modal-bottom-sheet-tutorial

[@user-qz9pb5nl2j]

change link blew to resocoder.com/2019/01/30/flutter-modal-bottom-sheet-tutorial/

[@CarlosHenrique-th3qg]

Hey Reso Coder, there is a better way to make this rounded corners.

[@dragon_warrior_]

using shape right?

[@yannmassard3970]

man .. just use Colors.transparent

[@voicheci007]

No longer focusing on Kotlin? Is Flutter the new Kotlin?

[@ResoCoder]

I feel like Flutter is a more effective tool to build apps. It can be used together with Kotlin though to write some native functionality.

[@karlbooklover]

that is exactly right