Flutter Tutorial - Draggable Modal Bottom Sheet: Scrollable, Height, Full Screen, Rounded Corners

Ғылым және технология

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: kzread.info...
👉 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

Пікірлер: 115

  • @HeyFlutter
    @HeyFlutter Жыл бұрын

    👉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

  • @newman4548
    @newman45482 жыл бұрын

    what I Like about your video is that you covered all the cases that we may have, awesome video man, keep them coming

  • @DamithaRaveendra
    @DamithaRaveendra2 жыл бұрын

    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 !!!

  • @danielbrandao5484
    @danielbrandao54843 жыл бұрын

    Hey Johannes, your videos are incredible. I have been consuming a lot of your content. Hugs from Brazil

  • @jajasaria
    @jajasaria3 жыл бұрын

    Ohh here it its. So happy you make a tutorial on this. Thank u so much

  • @iamnomana
    @iamnomana2 жыл бұрын

    Another awesome tutorial from one of my fav KZreadrs 👌🏼❤️

  • @ifelix822
    @ifelix8222 жыл бұрын

    awesome tutorial. well explained!

  • @sauravgupta6166
    @sauravgupta61662 жыл бұрын

    Thankyou brother u r now one my fav youtuber

  • @bibekmagar9897
    @bibekmagar98972 жыл бұрын

    As always your video is very helpful ..Thank you for this tutorial

  • @armn0912
    @armn09122 жыл бұрын

    You make my knowledge great again 😁. Thanks you very much

  • @sauravk5767
    @sauravk57672 жыл бұрын

    very helpful video. thank you Milke

  • @locphucinh6160
    @locphucinh61603 жыл бұрын

    Thank you very much. Great tutorial

  • @c4m3lion
    @c4m3lion2 жыл бұрын

    I always try to find other solutions as well. But yours are so perfect I cannot find anywhere on internet. Thanks

  • @HeyFlutter

    @HeyFlutter

    2 жыл бұрын

    Thank you, c4m3lion! 🙂

  • @SirChatur
    @SirChatur3 жыл бұрын

    Keep doing this great work

  • @rudinandrey
    @rudinandrey2 жыл бұрын

    best explanation I've ever seen :-) thanks a lot!!!

  • @user-xv8xg8zs2e
    @user-xv8xg8zs2e2 жыл бұрын

    You are awsome! Just what i was looking for! thanks!

  • @josephkamande4502
    @josephkamande45022 жыл бұрын

    You know flutter a lot. Thanks for your nice videos

  • @SunGkd123
    @SunGkd1233 жыл бұрын

    Great tutorial thank you 😁

  • @robisonkarls
    @robisonkarls2 жыл бұрын

    I love it, thx for the content.

  • @uditmishra5583
    @uditmishra55832 жыл бұрын

    very helpful man,thanks👍👍

  • @Hassan-kp5cu
    @Hassan-kp5cu3 жыл бұрын

    Well done. Thanks

  • @imchiennb
    @imchiennb3 жыл бұрын

    your content is awesome.

  • @fcruz6711
    @fcruz6711 Жыл бұрын

    Best flutter channel on YT

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    Glad to hear that, Thank you fcruz! 😊

  • @wesleybarnes5376
    @wesleybarnes53762 жыл бұрын

    Thanks for video!

  • @user-vi2fp6dl7b
    @user-vi2fp6dl7b3 ай бұрын

    Good job! Thank you very much!

  • @HeyFlutter

    @HeyFlutter

    3 ай бұрын

    Glad it was helpful, @user-vi2fp6dl7b 😀

  • @timurkarev6590
    @timurkarev65902 жыл бұрын

    Very good contentment, you helps me a lot of times. Thank you!

  • @HeyFlutter

    @HeyFlutter

    2 жыл бұрын

    Glad I could be of help, Thank you Timur Karev! 😊

  • @hashammubeen5208
    @hashammubeen52083 жыл бұрын

    You amazing Bro ... I understand every thing in this video ... keep growing. Love from PAKISTAN ❤

  • @FransGamingLow
    @FransGamingLow Жыл бұрын

    Love the explanation. Thank you very much

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    You’re most welcome, Frans Gaming Low! 🙂

  • @calma4030
    @calma40302 жыл бұрын

    Very nice!

  • @dzTiger23
    @dzTiger232 жыл бұрын

    Big fan of your content.from Algeria

  • @blessingezinne1407
    @blessingezinne140711 ай бұрын

    Really helpful... thank you

  • @HeyFlutter

    @HeyFlutter

    11 ай бұрын

    You’re most welcome, @blessingezinne1407! 🙂

  • @kaushalyaroshan
    @kaushalyaroshan Жыл бұрын

    Awesome content. Thank you so much❤❤🔥🔥

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    You’re most welcome, Kaushalya Roshan! 🙂

  • @The_Lik_96
    @The_Lik_96 Жыл бұрын

    Well done bro!

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    Thanks, Cakic! 🙂

  • @SagarSinghAwesome
    @SagarSinghAwesome2 жыл бұрын

    Your all videos are awesome

  • @SagarSinghAwesome

    @SagarSinghAwesome

    2 жыл бұрын

    @@HeyFlutter most welcome sir😊

  • @serdariss1043
    @serdariss10432 жыл бұрын

    @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?

  • @prashantbhardwaj7627
    @prashantbhardwaj7627 Жыл бұрын

    Thanks alot man! you saved me a lot of time.

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    You are welcome, Prashant Bhardwaj!

  • @walaaeuqul728
    @walaaeuqul7289 ай бұрын

    Very helpful.. thank you a lot 👍🏻

  • @HeyFlutter

    @HeyFlutter

    9 ай бұрын

    Glad it was helpful, @walaaeuqul728 😀

  • @naveen__sah
    @naveen__sah Жыл бұрын

    thank you so much for the best and most helpful tutorial

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    You’re most welcome, Naveen Sah! 🙂

  • @ricard458
    @ricard4582 жыл бұрын

    great help! Thanks. If you need to do something additionally while closing the bottom sheet, you can do showModalBottomSheet(...).whenComplete(() => yourMethod());

  • @fabiendesnoues9080
    @fabiendesnoues90802 жыл бұрын

    Thank for 6:45 - 7:15 !!!!

  • @sportKO12
    @sportKO123 жыл бұрын

    Thx bro.

  • @samrashafique8580
    @samrashafique85803 жыл бұрын

    best :) thank u ..

  • @PhilGerb93
    @PhilGerb932 жыл бұрын

    You are a goddamn hero

  • @caramelcoffeejelly5512
    @caramelcoffeejelly55128 ай бұрын

    thanks a lot bro

  • @HeyFlutter

    @HeyFlutter

    8 ай бұрын

    You’re most welcome, @caramelcoffeejelly5512! 🙂

  • @wahyujus
    @wahyujus3 жыл бұрын

    nice sheet video sheesh

  • @saadebad3063
    @saadebad30632 жыл бұрын

    awesome video bro ... i jst want to ask can we navigate to other screen using bottom sheet

  • @stanislauspnayenggita1361
    @stanislauspnayenggita13613 жыл бұрын

    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

  • @amazedking1333
    @amazedking13333 жыл бұрын

    can we have video about overlay our flutter application over other apps

  • @oleksiivinokur2195
    @oleksiivinokur2195 Жыл бұрын

    Thx a lot

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    You are welcome, @oleksiivinokur2195 😊

  • @mohammedabdaldaim6723
    @mohammedabdaldaim67233 жыл бұрын

    Very nice bro.. I hope you make a full functional app Like (E-commerce app). thanks

  • @antoniou.c.oliveira572
    @antoniou.c.oliveira572 Жыл бұрын

    👋👋👋thanks so much👋👋👋

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    You are welcome, Antonio U. C. Oliveira!

  • @andresarenas2833
    @andresarenas28332 жыл бұрын

    Thankss

  • @guy-fl
    @guy-fl3 ай бұрын

    Hats off

  • @HeyFlutter

    @HeyFlutter

    3 ай бұрын

    Thank you, @guy-fl! 🙂

  • @amgedgamer1827
    @amgedgamer18273 жыл бұрын

    Waw great

  • @xjuanxo
    @xjuanxo Жыл бұрын

    Thaaaaaanks

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    You are welcome, Juan Mosquera 😊

  • @dranzgaming1341
    @dranzgaming1341 Жыл бұрын

    Very helpful🫡❤

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    Thank you, DranzGaming! 🙂

  • @sessodantesco2605
    @sessodantesco26052 жыл бұрын

    Great video, but do you know how create a buttom sheet drop down by top of the screen?

  • @sessodantesco2605

    @sessodantesco2605

    2 жыл бұрын

    @@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

  • @FDiasBsb
    @FDiasBsb2 жыл бұрын

    Amazing, help me too mach

  • @HeyFlutter

    @HeyFlutter

    2 жыл бұрын

    Glad I could be of help, Thank you Fernando Dias! 😊

  • @battlehunterofficial4586
    @battlehunterofficial45863 жыл бұрын

    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

  • @josearmando6372
    @josearmando63726 сағат бұрын

    Hola! android studio, sabes como bottom sheet dialog con GIF por favor me ayudas!!?

  • @zubairafzal6196
    @zubairafzal61963 жыл бұрын

    Bro make a play list on projects by flutter

  • @mohamedyashik1049
    @mohamedyashik10493 жыл бұрын

    How to datatable s.no rows values increment manually?

  • @tiktik1516
    @tiktik15162 жыл бұрын

    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?

  • @arashmidos100
    @arashmidos1003 жыл бұрын

    Thanks for your tutorial, however, I don't like mandatory subscriptions for a snippet code

  • @sevabante7781
    @sevabante77813 жыл бұрын

    Do you have an idea on how to make a row of images scroll horizontally inside a bottomsheet?

  • @sevabante7781

    @sevabante7781

    3 жыл бұрын

    @@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.

  • @ndukwevictory1663
    @ndukwevictory16632 жыл бұрын

    I encountered an error at 2:36. I put context and it gave me an error. Please how do I fix it?

  • @codboxer
    @codboxer Жыл бұрын

    Jo.. How can I tap a button on the screen, when the bottom sheet on the screen in initialChildSize ?

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    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 🙂

  • @mufcandika
    @mufcandika Жыл бұрын

    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

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    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 🙂

  • @aminelahrim8142
    @aminelahrim81423 жыл бұрын

    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

  • @s-sugoi835

    @s-sugoi835

    3 жыл бұрын

    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.

  • @havlikmiklos2773
    @havlikmiklos27732 жыл бұрын

    Is there any way to size the modalbottomsheet max height based on its content?

  • @havlikmiklos2773

    @havlikmiklos2773

    2 жыл бұрын

    @@HeyFlutter I already tried this one, but it didn't work for me

  • @funnynews341
    @funnynews3412 жыл бұрын

    how to setstate in Modal Bottom Sheet ? i create a RangeSlider but can't setstate for rangeSlider work correct?

  • @funnynews341

    @funnynews341

    2 жыл бұрын

    @@HeyFlutter Thank you so much!

  • @ryanb1738
    @ryanb1738 Жыл бұрын

    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?

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    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 🙂

  • @ryanb1738

    @ryanb1738

    Жыл бұрын

    @@HeyFlutter Thank you. I had actually found that link beforehand and still struggle calling the api in the modal bottom sheet. Will keep trying.

  • @rajashanmugam5510
    @rajashanmugam55102 жыл бұрын

    hi i tried ,after building apk that page will display as grey color what i want to do

  • @HeyFlutter

    @HeyFlutter

    2 жыл бұрын

    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 🙂

  • @Socsob
    @Socsob Жыл бұрын

    Struggling to curve the edges after setting the intialChildSize with the transparent background

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    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 🙂

  • @ManavendranadhRoy
    @ManavendranadhRoy2 жыл бұрын

    makeDismissible widget not available

  • @fedecasani1346
    @fedecasani1346 Жыл бұрын

    te amo

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    Thank you, Fede Casani! 🙂

  • @marcdietmann724
    @marcdietmann7242 жыл бұрын

    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

  • @rajulaherwal1575
    @rajulaherwal15752 жыл бұрын

    I no understand

  • @aminelahrim8142
    @aminelahrim81423 жыл бұрын

    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

  • @jeslinjacob6472
    @jeslinjacob6472 Жыл бұрын

    bro ur a life saver

  • @HeyFlutter

    @HeyFlutter

    Жыл бұрын

    Thank you, Jeslin Jacob! 🙂

Келесі