All Flutter Widgets Explained: Your Essential Guide

[@FlutterMapp]

COURSES 🚀 Flutter Zero to Hero: www.fluttermapp.com/course 💰 Make Money with Flutter: www.fluttermapp.com/flutter-pro 🗺 Free Flutter Checklist: www.fluttermapp.com/f-checklist TIMESTAMPS 0:00​ Intro 🚀 ⚡WIDGET 000 - 025 ⚡ 0:31 About Dialog 1:16 About List Tile 1:51 Absorb Pointer 2:35 Alert Dialog 3:34 Align 4:15 Animated Align 5:23 Animated Builder 7:00 Animated Container 8:23 Animated Cross Fade 9:33 Animated Default Text Style 10:58 Animated Icon 12:47 Animated List 16:26 Animated Modal Barrier 19:39 Animated Opacity 20:31 Animated Padding 22:04 Animated Physical Model 23:27 Animated Positioned 24:44 Animated Rotation 25:45 Animated Size 26:41 Animated Switcher 28:05 App Bar 28:59 Aspect Ratio 29:45 Auto Complete 31:07 Backdrop Filter 32:01 Banner ⚡WIDGET 026 - 050 ⚡ 32:55 Baseline 33:29 Block Semantics 35:27 Bottom Navigation Bar 36:45 Bottom Sheet 37:35 Builder 38:27 Card 39:01 Center 39:42 Checkbox 40:21 Checkbox List Tile 41:24 Chip 41:48 Choice Chip 42:22 Circle Avatar 42:54 Circular Progress Indicator 43:23 Clip Oval 44:24 Clip Path 45:14 ClipRect 46:24 ClipRRect 46:24 Close Button 46:47 Colored Box 47:04 Color Filtered 47:34 Constrained Box 48:18 Container 49:00 Column 50:01 Cupertino App 50:35 Cupertino Page Scaffold ⚡WIDGET 051 - 75⚡ 51:14 Cupertino Action Sheet Action 52:23 Cupertino Activity Indicator 52:50 Cupertino Alert Dialog 53:57 Cupertino Button 54:47 Cupertino Context Menu 55:35 Cupertino Date Picker 57:16 Cupertino Page Route 58:11 Cupertino Page Scaffold 58:57 Cupertino Picker 1:00:19 Cupertino Popup Surface 1:01:14 Cupertino Scroll Bar 1:02:03 Cupertino Search Text Field 1:02:48 Cupertino Segmented Control 1:04:36 Cupertino Slider 1:05:25 Cupertino Sliding Segmented Control 1:06:13 Cupertino Switch 1:06:47 Cupertino Tab Scaffold 1:07:29 Cupertino Tab Bar 1:08:17 Cupertino Tab View 1:09:05 Cupertino Text Field 1:09:36 Custom Paint 1:10:59 Custom Scroll View 1:12:00 Data Table 1:12:46 Data Column 1:13:28 Data Cell ⚡WIDGET 076 - 100 ⚡ 1:14:36 Time Picker 1:14:03 Data Row 1:15:48 Date Picker 1:16:59 Date Range Picker 1:18:19 Decorated Box 1:19:13 Decorated Box Transition 1:21:35 Default Text Style 1:22:36 Dismissible 1:24:15 Divider 1:24:51 Draggable Scrollable 1:25:30 Drag Target 1:27:16 Draggable 1:28:47 Drawer 1:29:48 Drawer Header 1:30:11 Dropdown Button 1:31:16 Elevated Button 1:32:01 Error Details 1:32:48 Error Widget 1:33:55 Expanded 1:34:36 Expand Icon 1:35:34 Expansion Panel List 1:37:12 Expansion Panel 1:39:30 Expansion Tile 1:40:40 Fade In Image 1:41:36 Fade Transition ⚡WIDGET 101 - 125 ⚡ 1:42:41 Filter Chip 1:43:24 Fitted Box 1:44:15 Flexible 1:45:37 Floating Action Button 1:46:31 Flow 1:49:16 Flutter Logo 1:49:47 Form 1:51:13 Fractional Translation 1:52:28 Fractionally Sized Box 1:53:05 Future Builder 1:54:45 Gesture Detector 1:55:33 Grid Paper 1:56:00 Grid Tile 1:56:49 Grid Tile Bar 1:57:42 Grid View 1:58:27 Hero 1:59:49 Icon 2:00:21 Icon Button 2:01:02 Ignore Pointer 2:02:22 Image 2:02:54 Indexed Stack 2:03:58 Inkwell 2:07:42 Input Chip 2:05:50 Interactive Viewer 2:06:34 Layout Builder ⚡WIDGET 126 - 150 ⚡ 2:07:27 Limited Box 2:08:20 Linear Progress Indicator 2:09:22 Listener 2:10:43 List Tile 2:11:07 List View 2:11:45 List Wheel Scroll View 2:12:15 Long Press Draggable 2:13:35 Material App 2:14:37 Material Banner 2:15:27 Material Button 2:16:00 Merge Semantics 2:16:33 Modal Barrier 2:17:53 System Mouse Cursors 2:18:37 Mouse Region 2:20:00 Navigation Bar 2:21:05 Notification Listener 2:22:39 Offstage 2:23:23 Opacity 2:23:55 Orientation Builder 2:24:31 Outlined Button 2:25:01 Overflow Bar 2:25:31 Overflow Box 2:26:04 Padding 2:26:42 Page View 2:27:06 Physical Modal ⚡WIDGET 151 - 175⚡ 2:27:46 Physical Shape 2:28:16 Placeholder 2:28:52 Platform Menu Bar 2:30:37 Popup Menu Button 2:31:35 Positioned 2:32:15 Positioned Transition 2:34:14 Preferred Size 2:34:59 Radio 2:36:08 Radio List Tile 2:37:00 Range Slider 2:37:41 Raw Autocomplete 2:39:23 Raw Chip 2:39:47 Refresh Indicator 2:40:35 Reorderable List View 2:41:51 Rich Text 2:42:40 Rotated Box 2:43:02 Rotation Transition 2:44:04 Row 2:44:40 Scaffold 2:45:47 Scale Transition 2:46:45 Scrollbar 2:47:16 Selectable Text 2:47:44 Semantics 2:48:34 Shader Mask 2:49:26 Shortcuts ⚡WIDGET 176 - 200⚡ 2:51:12 Simple Dialog 2:52:04 Single Child Scroll View 2:52:37 Size Transition 2:53:39 Sized Box 2:54:07 Sized Overflow Box 2:54:41 Slide Transition 2:55:51 Slider 2:56:29 Sliver App Bar 2:57:39 Sliver Fixed Extent List 2:58:18 Sliver Grid 2:59:00 Sliver List 2:59:35 Sliver Opacity 3:00:15 Sliver Padding 3:00:43 Sliver To Box Adapter 3:01:08 Snack Bar 3:01:46 Spacer 3:02:29 Stack 3:02:58 Stepper 3:04:29 Stream Builder 3:05:51 Switch 3:06:13 Switch List Tile 3:06:46 Tab Bar 3:07:35 Tab Page Selector 3:09:17 Table 3:10:29 Text ⚡WIDGET 201 - 215⚡ 3:11:17 Text Button 3:12:25 Text Field 3:13:21 Text Form Field 3:14:59 Text Span 3:15:43 Theme Data 3:16:55 Toggle Buttons 3:17:32 Tooltip 3:17:54 Transform 3:18:21 Tween Animation Builder 3:19:11 Value Listenable Builder 3:20:06 Vertical Divider 3:20:37 Visibility 3:21:20 Will Pop Scope 3:22:24 Wrap 3:23:06 Safe Area 3:23:28 Outro 🚀

[@zekaidemir9304]

The really best content. Thank for your awesome work

[@biigsmokee]

Set Intro to 0:00 and remove the spaces and they show up in the video

[@FlutterMapp]

@@biigsmokee Didnt work, after too many chapters, YT don't show them anymore.. sad

[@lonerider9645]

Man appreciate you for helping the community with such great tutorials. This is the video which every flutter developer would have wanted for so long. All widgets at one place. 👍🤘

[@FlutterMapp]

Same! I never understood why such a video didn't exist at the first place. The answer: "IT TAKE FOREVER TO CREATE!!!" 😂😂😂

[@syedaliiiabbas]

I just keep on roaming here and there on youtube finding widgets and at last, I came to the jukebox of widgets xD. Thanks, man for the best series ever. Appreciated

[@FlutterMapp]

Welcome!

[@andrewxu9342]

Thanks for your great video :)

[@FlutterMapp]

Thank you Andrew! I hope this helped you discover at least one new widget! 🔥

[@Adde974]

Sir hats off to you for your dedication. I'm at beginner level and i just can't tell you how happy i am seeing your extraordinary tutorials. I just finished 1 hour beginner tutorial and just wow, So happy to have found this incredible channel. Once again Thank you Sir.

[@milosivackovic]

Thanks!

[@FlutterMapp]

Thank you brother!

[@Gu.henning]

Amazing, can't even thank you enough, that's great work!!! Helped me a lot and I know is helping a lot of others developers too

[@RivaanRanawat]

Wonderful series with mindblowing consistency. What's next? Every Flutter Package ever created?

[@FlutterMapp]

Never 😂 This was way to long to create 😂 but thanks man!

[@princesiachin279]

wiw this is truly insane and amazing. never know flutter provides so many built in widgets. I've been usinng react native for about 4 years now, and I thinnk i'm gonna learn this technology on next month

[@bashasha]

Wow man this huge level of work great !thanks for your effort ! god bless you

[@FlutterMapp]

Thank you Basha!

[@autozone5335]

This is amazing by all means. Thanks for spending effort/time to prepare such comprehensive material 👍

[@Tyrowo]

thanks for making this video! Learned a lot, I appreciate it. But one thing... You forgot to include the Mooner widget!! I love that one, use it all the time

[@FlutterDudexd]

I couldn't find mooner widget?

[@ArkaRoy10]

In one word its an outstanding video, working brilliantly as our mindmap !! You deserve more praise

[@marufhassan634]

This is insane, if I need jist of any widget from the docs, I just need to check the timestamp and thats it. This is literally a goldmine for Flutter devs.

[@FlutterMapp]

Thank you Hassan! Wish you the best in your Flutter journey! 🤝🔥

[@anasalbattiri003]

Great work man! Keep going.

[@ExtendedhighlightsNew]

Thanks mate! Appreciate your video!❤❤

[@anshusingh6116]

Seriously bro you are life saviour for us ❤️ liked, shared to my friend, subscribed for more content like this and saved to come back again and again.

[@rahulkp1852]

Insane work. I just looked for a drop, now i found the ocean.

[@FlutterMapp]

😂😂 Thank you!

[@marufhassan634]

All the widgets in the docs, thats insane

[@njo_lv]

This is a great resource, thank you for your time and effort putting this together.

[@hugovicfortman]

Absolute Legend! 👑

[@haitam1234-j6e]

Awesome work, really appreciate you for helping us ! , I hope you do another series where you show use cases for each widget in real world apps :D

[@enslow]

so many many widgets!! Thanks. :)

[@rajatdas6133]

Great work buddy 👍👏

[@antenehprime9012]

Thank you so much for creating this tutorials and also providing the source code for free you rock👍👊

[@AzticAztin]

Keep this channel up man, it will be even more popular, and will help even more people.✴

[@notify7610]

😊 I can't wait to be a Pro by the end of this course alone Thanks man and God be praise

[@m.sulthanalihsan464]

incredible.. thanks for ur effort to making this video man🚀🔥

[@FlutterMapp]

Thanks!

[@pravinprince3221]

Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir

[@nano32473]

Very good explanation my friend ! Thanks a lot !

[@kheehao9102]

Big appreciate your work!! ❤

[@RajA-me9cl]

Thank You for the efforts. This is helpful! ⭐

[@kalderDean]

Absolute mad Lad! Love it!!

[@SDDinushanShehandinushan]

Nice work !!! Great work dude😍 ....Now no need to worry about finding widgets in Google 😍

[@rise4gamers506]

Best video of the year ❤❤

[@af20091]

You are making wonderful tutorials.Thanks a lot ❤

[@shahabjoon201]

Awesome, I was looking for gold but I found diamond, thank you man.

[@FlutterMapp]

lol, thank you man!

[@amirsalarsalehi4968]

Amazing !!! Thanks Brother

[@madjours]

Wonderful series, thank you so much.

[@tlawlessrr-vid-archive]

Say SizedBox one more time.... lol. Great video man. Thanks.

[@kbyo2006]

Great!! I was doing something like this, but i only have 82... 😅😅. Thanks for doing this Great project 👏👏👌

[@imGhare]

thanks for not putting a long intro

[@АртурЗарипов-ю9п]

Good job! Thank you very much!

[@john_3313]

VERY USEFUL! THANK YOUU!

[@noeljose]

This was exactly what I wanted, "Odin is with us"

[@binarnesia]

Really appreciate this man, 😁 now i can sleep well

[@rifat018]

Cupertino app widget If the app is made, will it run on Android?

[@zeb_lala134]

Favourite video on KZbin

[@FlutterMapp]

Lol, thanks!

[@AdamcyNaira]

Wow this is awesome 😍👍

[@FlutterMapp]

Thanks Adam!

[@jokerbanny]

Thank you all bro !

[@oswaldoolea2889]

forever in debt with you, not only me but the whole flutter community.

[@FlutterMapp]

Pleasure to share!

[@TheCastagna96]

loved it, what is the visual studio theme you're using?

[@FlutterMapp]

I use the default dark theme 👏

[@jvlamy]

Great work !

[@FlutterMapp]

Thanks!

[@fatima-cf1bj]

thank you I love your channel 😍🥰

[@alexofori6565]

God bless you in abundant Sir

[@mohammadkashif5441]

Appreciated ❤

[@engroga]

Excellent video.

[@ul-educate4090]

You are just awesome 💯💯

[@saqqara6361]

Great Work!!!

[@FlutterMapp]

Thank you!

[@smootherthan.butter]

Salute you already got my respect

[@gabrielartioli6894]

This is insane, divine work. You only forgot the ButtMark Widget, but i'ts still great! Thanks for the video.

[@FlutterMapp]

😂 Thank you!

[@ss7528divers]

Legend!

[@rnabyankitavasthi]

Great Video

[@lux_auram]

Duuude! Damn!! This tutorial is hot af!

[@FlutterMapp]

Glad you like it Lux🔥🔥

[@skullerhood]

You are awesome ❤

[@theloner3744]

thanks for this video , on three hours only.

[@arslanAshh]

Anyone can learn flutter through this video

[@mohammadfekri4987]

tanx for nice video

[@FlutterMapp]

Glad you liked it

[@jawwaadsabree5573]

❤❤❤😢 so inspirational

[@haphaptvl]

님 짱인듯..👍

[@miguel_franca]

You forgot the mooner widget! But great work anyways 😉

[@gautamgohil7036]

Very very useful video

[@junveld4830]

you are sick bro

[@thorbenschott2481]

This is really good content! But KZbin has cut off your playlist! Apparently there can't be more than 149 videos in such a playlist. If the problem is not only with me, it would be good to split the playlist in two. KZbin shows me: "66 unavailable videos are not displayed" and that's true, even if the playlist wants to call the next video the last ones are just not called. So 66 of your videos are not available for me. Please check for yourself, because it would be a shame. This is really good content.

[@thorbenschott2481]

by the way i miss "System Mouse Cursors", "Physical Shape" and "Placeholder" up to here ("Padding"). Maybe something went wrong

[@FlutterMapp]

On my side I can only see 200 videos in the playlist. (Even tho the playlist say 215). If you click on the video 200, this will show you the following video. 👍

[@Suchti2509]

Could learn for Calculus 2 but also could watch a lord of the rings long video about classes from a framework I learned 2 weeks ago

[@stephanodev]

amazing!

[@routeewang4437]

it is a realy good example to multiple widgets of flutter. but could u share these code?

[@abdessalemmohellebi]

I hope you have a good day So can you make the code able to download for we can use it in parallel thanks

[@CloudyOp_21]

Dangerous 🎉

[@baknguen]

thanks

[@MadeInPython]

0:00 bookmark for later

[@СтаниславЛагун-х4й]

Очень круто. Спасибо за ваш труд!

[@-Sergey]

Жалко только, что про mooner widget забыл рассказать. А так-то, конечно, очень хорошую работу проделал.

[@ImLay-Z]

Should a create a pdf file or is it already created by someone?

[@abinavm358]

Amazing..

[@FlutterMapp]

🔥🔥

[@lucky520ytc]

Notification ganggg 💪

[@AliKhatib100]

Thank you very much, but you forgot about the mooner widget. Can you make a video about it?

[@FlutterMapp]

😂 Yeah I'll do a video about this new widget soon, its really cool!

[@FlutterDudexd]

What is mooner widget I couldn't find it?

[@AliKhatib100]

@@FlutterDudexd TBH if I remember correctly it was like a kinda of a joke question OP wanted us to ask him about in one of his previous videos. There is no such thing called as the mooner widget.

[@FlutterDudexd]

@@AliKhatib100 wow and everybody is asking this question in chats 😅🤣

[@karabongwato3391]

Kgoši!! (Means King in Sepedi- One of Official South African Languages)

[@fkadeal]

Can u add some of time stamp on description

[@fkadeal]

It also work as chapter

[@FlutterMapp]

True!, the problem is... the description only access 5000 characters and I can't put all the timestamps here. Do you have a solution?

[@yahya2892]

thanks

[@marufhassan634]

How could you forget the mooner widget?

[@FlutterMapp]

😂 Man I know... All this work and I forgot 1 Widget... Thanks Hassan!

[@Jivaa]

Finally... You did it !! Kiddos

[@FlutterMapp]

Yes! It's finally over 😂

[@rafaeldaime]

You forgot Theo mooner widget!!! 😅

[@jassem500]

you forgate the mooner widget 👀

[@akshattamrakar9071]

You forgot mooner widget.

[@FlutterMapp]

Damn! I guess it should have been 216 widgets...😂

[@vuntaleelaprasadvuntaleela517]

❤❤🎉

[@muhammadyusoffjamaluddin]

INSTANT LIKE LOL 🤣🤣🤣

[@FlutterMapp]

Thanks!

[@rajatdas6133]

You forgot the mooner widget

[@idanbiton5407]

Man u forgot the Moone 🌙 Widget lol.

[@FlutterMapp]

Yeah.. A lot of people has mention it... I'll do a other video to explain this new widget 🙏

[@adomicarts]

🕵️

[@yanis6003]

a french accent lol