Flutter Tutorial - Draggable Modal Bottom Sheet: Scrollable, Height, Full Screen, Rounded Corners
Vložit
- čas přidán 27. 07. 2024
- Use the Flutter Draggable Modal Bottom Sheet to display extra information within a custom height sheet in Flutter. Adjust the height of the bottom sheet, make the bottom sheet scrollable, make the bottom sheet full screen, and include rounded corners & circular corners to the bottom sheet.
Click here to Subscribe to Johannes Milke: czcams.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/moda...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Persistent Bottom Sheet Tutorial: • Flutter Tutorial - Per...
Draggable Scrollable Sheet Tutorial: • Flutter Tutorial - Dra...
Sliding Up Panel Tutorial: • Flutter Tutorial - Sli...
Fix Bottom Overflowed By Pixels Tutorial: • Flutter Tutorial - Fix...
Shimmer Loading Animation Tutorial: • Flutter Tutorial - Shi...
Animated List Tutorial: • Video
Navigation Drawer Tutorial: • Flutter Tutorial - Sid...
Collapsible Sidebar Menu Tutorial: • Flutter Tutorial - Col...
Selectable Sidebar Menu Tutorial: • Flutter Tutorial - Sel...
Sortable DataTable Tutorial: • Flutter Tutorial - Sor...
Selectable DataTable Tutorial: • Flutter Tutorial - Sel...
Editable DataTable Tutorial: • Flutter Tutorial - Edi...
Expandable ListView Tutorial: • Flutter Tutorial - Exp...
Drag & Drop In ListView Tutorial: • Flutter Tutorial - Dra...
Drag & Drop Widgets Tutorial: • Flutter Tutorial - Dra...
Flutter Layout Basics Tutorial: • Flutter Layout Basics:...
TIMELINE
0:00 Introduction Draggable Modal Bottom Sheet
0:20 Create Modal Bottom Sheet / showModalBottomSheet
1:06 Expanded Column In Modal Bottom Sheet
1:28 Shrinked Column To Widget Height In Modal Bottom Sheet
1:40 Overflowed By Pixels In Modal Bottom Sheet
2:17 Dismiss Bottom Sheet By Scrolling Down
2:23 Dismiss Bottom Sheet Programmatically
2:45 Disable Hide Bottom Sheet By Dragging / enableDrag
3:09 Disable Dismissable Bottom Sheet / isDismissable
3:31 Set Widget Content Height For Modal Bottom Sheet
4:13 Rounded Corners Bottom Sheet / Circular Corners Bottom Sheet
4:59 Set Height For Modal Bottom Sheet / Set Height For Draggable Scrollable Sheet
6:14 Scrollable Modal Bottom Sheet / Scrollable Draggable Scrollable Sheet
6:45 Scroll To Maximum Height In Bottom Sheet / maxChildSize
7:15 Hide Bottom Sheet By Scrolling
7:26 Full Screen Modal Bottom Sheet
7:53 Fix Dismissable In Draggable Scrollable Sheet
8:23 Fix Rounded Corners For Draggable Scrollable Sheet
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
Create Flutter Modal Bottom Sheet Tutorial, Create Flutter Modal Bottom Sheet with Rounded Corner & Transparent Background, Use A Beginners Guide to the Flutter Bottom Sheet, Modal Bottom Sheet - Android Studio Tutorial, Flutter: BottomSheet Tutorial | Persistent & Modal Sheets
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke - Věda a technologie
👉Join 12 Week Flutter Training: heyflutter.com
👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f
Source Code: github.com/JohannesMilke/modal_bottom_sheet_example
what I Like about your video is that you covered all the cases that we may have, awesome video man, keep them coming
Hey Johannes, your videos are incredible. I have been consuming a lot of your content.
Hugs from Brazil
Love your content. I'm just learning stuff and these videos help me because most of the contents are up to date. Planning to learn more. Thanks a lot. Cheers !!!
Another awesome tutorial from one of my fav CZcamsrs 👌🏼❤️
Ohh here it its. So happy you make a tutorial on this. Thank u so much
awesome tutorial. well explained!
As always your video is very helpful ..Thank you for this tutorial
very helpful video. thank you Milke
Thankyou brother u r now one my fav youtuber
You make my knowledge great again 😁. Thanks you very much
You know flutter a lot. Thanks for your nice videos
Thank you very much. Great tutorial
Keep doing this great work
You are awsome! Just what i was looking for! thanks!
best explanation I've ever seen :-) thanks a lot!!!
very helpful man,thanks👍👍
I love it, thx for the content.
Great tutorial thank you 😁
I always try to find other solutions as well. But yours are so perfect I cannot find anywhere on internet. Thanks
Thank you, c4m3lion! 🙂
Thanks for video!
Well done. Thanks
You amazing Bro ...
I understand every thing in this video ...
keep growing. Love from PAKISTAN ❤
your content is awesome.
Very nice!
Best flutter channel on YT
Glad to hear that, Thank you fcruz! 😊
Your all videos are awesome
@@HeyFlutter most welcome sir😊
Love the explanation. Thank you very much
You’re most welcome, Frans Gaming Low! 🙂
great help! Thanks. If you need to do something additionally while closing the bottom sheet, you can do showModalBottomSheet(...).whenComplete(() => yourMethod());
Good job! Thank you very much!
Glad it was helpful, @user-vi2fp6dl7b 😀
Really helpful... thank you
You’re most welcome, @blessingezinne1407! 🙂
Big fan of your content.from Algeria
Very good contentment, you helps me a lot of times.
Thank you!
Glad I could be of help, Thank you Timur Karev! 😊
Well done bro!
Thanks, Cakic! 🙂
Awesome content. Thank you so much❤❤🔥🔥
You’re most welcome, Kaushalya Roshan! 🙂
@Johannes Milke thanks for the guides they are really helpful! I have a question about this widget, how do i make the modal bottom sheet show up without using a button? I want it to be showing everytime and i just wanna use the buttons to change between different Modal Bottom Sheets. How can i achieve this?
Very helpful.. thank you a lot 👍🏻
Glad it was helpful, @walaaeuqul728 😀
thank you so much for the best and most helpful tutorial
You’re most welcome, Naveen Sah! 🙂
Thank for 6:45 - 7:15 !!!!
Thanks alot man! you saved me a lot of time.
You are welcome, Prashant Bhardwaj!
Thx bro.
thanks a lot bro
You’re most welcome, @caramelcoffeejelly5512! 🙂
nice sheet video
sheesh
best :) thank u ..
Thx a lot
You are welcome, @oleksiivinokur2195 😊
You are a goddamn hero
Thankss
awesome video bro ... i jst want to ask can we navigate to other screen using bottom sheet
Thank you for this great video
How do I set the Safe Area to the Modal Bottom Sheet?
say, I want to make a full screen sheet. But the sheet doesn't reach the status bar
Thanks before
Very nice bro.. I hope you make a full functional app Like (E-commerce app). thanks
👋👋👋thanks so much👋👋👋
You are welcome, Antonio U. C. Oliveira!
can we have video about overlay our flutter application over other apps
Hats off
Thank you, @guy-fl! 🙂
Waw great
Please help I have made a countdown timer which is working fine in body but it's not working in model bottom sheet how I can fix this
Thaaaaaanks
You are welcome, Juan Mosquera 😊
Very helpful🫡❤
Thank you, DranzGaming! 🙂
Amazing, help me too mach
Glad I could be of help, Thank you Fernando Dias! 😊
the opaque will pop anywhere in your widget(showmodelbottomsheet). How can we pop only the child: DraggableScrollable widget with a tap on outside the widget?
How to datatable s.no rows values increment manually?
Great video, but do you know how create a buttom sheet drop down by top of the screen?
@@HeyFlutter oh yes, in my project i want add a bottom sheet, but i want that it appears on the top of the screen. I hope to express myself good, but i am not good with english
Bro make a play list on projects by flutter
I encountered an error at 2:36. I put context and it gave me an error. Please how do I fix it?
hi, i have a problem like 9:06 where i the rounded corner doesnt disappear when we scroll, do you know how to fix it? thank you
Thank You @mufcandika! Follow this link: stackoverflow.com/questions/50376200/how-to-create-a-modal-bottomsheet-with-circular-corners-in-flutter
I hope you will get your answer 🙂
Jo.. How can I tap a button on the screen, when the bottom sheet on the screen in initialChildSize ?
Thank You rafi mohammed! Follow this link: medium.com/flutter-community/flutter-beginners-guide-to-using-the-bottom-sheet-b8025573c433
I hope you will get your answer 🙂
how to setstate in Modal Bottom Sheet ? i create a RangeSlider but can't setstate for rangeSlider work correct?
@@HeyFlutter Thank you so much!
Is there any way to size the modalbottomsheet max height based on its content?
@@HeyFlutter I already tried this one, but it didn't work for me
Do you have an idea on how to make a row of images scroll horizontally inside a bottomsheet?
@@HeyFlutter Thanks but my problem is that I have a bottomsheet that has a ListView that scrolls vertically but inside that ListView i need some images to scroll horizontally. Basically a nested list with different scroll direction. The thing is, it gives me an error when using nested ListView.
Thanks for your tutorial, however, I don't like mandatory subscriptions for a snippet code
hi i tried ,after building apk that page will display as grey color
what i want to do
Thank You Rajashanmugam! Follow this link: stackoverflow.com/questions/69862804/flutter-a-screen-is-grey-in-release-build-but-works-fine-when-run-from-androi
I hope you will get your answer 🙂
Any idea how I could add Google Places API data like address, website, opening hours, etc. to the bottom sheet when clicked on a marker on the Google Map?
Thank You Ryan B! Follow this link: medium.com/@rajesh.muthyala/flutter-with-google-maps-and-google-place-85ccee3f0371
I hope you will get your answer 🙂
@@HeyFlutter Thank you. I had actually found that link beforehand and still struggle calling the api in the modal bottom sheet. Will keep trying.
Struggling to curve the edges after setting the intialChildSize with the transparent background
Thank You Boscos! Follow this link: stackoverflow.com/questions/50376200/how-to-create-a-modal-bottomsheet-with-circular-corners-in-flutter
I hope you will get your answer 🙂
You should explain Flutter Push notification Background and fourground in Android and specialy on IOS (extra work) with Text And Image in Notification there is no content do that as vedio in both platform
i think push notifications goes waaaay beyond flutter tutorials scope as you would either need to implement firebase FCM or create a php websocket api.
te amo
Thank you, Fede Casani! 🙂
makeDismissible widget not available
danke das du so viele videos machst und ich immer weis dass du ein video hast, aber der deutsche Akzent haha, naja mein wär wahrscheinlich noch schlimmer
I no understand
Why you give us the Node of Flutter in simple way you deserve GDE just make improvement on Vedios Cover Image will make the channel of the level of FireShip
bro ur a life saver
Thank you, Jeslin Jacob! 🙂