Every Flutter Widget Explained!
Вставка
- Опубліковано 2 гру 2022
- This is every Flutter Widget.
GITHUB
Code of every Flutter Widget: github.com/fluttermapp/flutte...
TIMESTAMPS
🔥 = The best Widgets from this video
📜 = More information available in the pinned comment. Because UA-cam limit the description to 5000 characters, the entire timestamps is in the pinned comment.
0:00:00 Introduction
0:00:31 About Dialog
0:01:16 About List Tile
0:01:51 Absorb Pointer
0:02:35 Alert Dialog 🔥
0:03:34 Align
0:04:15 Animated Align
0:05:23 Animated Builder
0:07:00 Animated Container 🔥
0:08:23 Animated Cross Fade 🔥
0:09:33 Animated Default Text Style 🔥
0:10:58 Animated Icon 🔥
0:12:47 Animated List
0:16:26 Animated Modal Barrier
0:19:39 Animated Opacity 🔥
0:20:31 Animated Padding
0:22:04 Animated Physical Model
0:23:27 Animated Positioned
0:24:44 Animated Rotation 🔥
0:25:45 Animated Size
0:26:41 Animated Switcher
0:28:05 App Bar
0:28:59 Aspect Ratio 🔥
0:29:45 Auto Complete 🔥
0:31:07 Backdrop Filter
0:32:01 Banner
0:32:55 Baseline
0:33:29 Block Semantics
0:35:27 Bottom Navigation Bar
0:36:45 Bottom Sheet 🔥
0:37:35 Builder
0:38:27 Card 🔥
0:39:01 Center
0:39:42 Checkbox
0:40:21 Checkbox List Tile 🔥
0:41:24 Chip
0:41:48 Choice Chip 🔥
0:42:22 Circle Avatar 🔥
0:42:54 Circular Progress Indicator
0:43:23 Clip Oval
0:44:24 Clip Path
0:45:14 ClipRect
0:46:24 ClipRRect
0:46:24 Close Button
0:46:47 Colored Box
0:47:04 Color Filtered
0:47:34 Constrained Box
0:48:18 Container
0:49:00 Column
0:50:01 Cupertino Widgets (6)📜
0:54:47 Cupertino Context Menu 🔥
0:55:35 Cupertino Widgets (9)📜
1:05:25 Cupertino Sliding Segmented Control 🔥
1:06:13 Cupertino Widgets (5)📜
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
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
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:04:42 Input Chip
2:05:50 Interactive Viewer 🔥
2:06:34 Layout Builder 🔥
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
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
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 Widgets (7)📜
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
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 🚀
WEBSITE
fluttermapp.com/
EDITOR
Thanks to Amaan Ansari!
CREDIT
Flutter Team (Widget catalog): docs.flutter.dev/development/...
#EveryFlutterWidget
#Fluttermapp
#Flutter
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 🚀
The really best content. Thank for your awesome work
Set Intro to 0:00 and remove the spaces and they show up in the video
@@biigsmokee Didnt work, after too many chapters, YT don't show them anymore.. sad
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. 👍🤘
Same! I never understood why such a video didn't exist at the first place. The answer: "IT TAKE FOREVER TO CREATE!!!" 😂😂😂
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.
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
This is amazing by all means. Thanks for spending effort/time to prepare such comprehensive material 👍
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
Welcome!
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
This is a great resource, thank you for your time and effort putting this together.
Thank you so much for creating this tutorials and also providing the source code for free you rock👍👊
In one word its an outstanding video, working brilliantly as our mindmap !! You deserve more praise
Wonderful series with mindblowing consistency. What's next? Every Flutter Package ever created?
Never 😂 This was way to long to create 😂 but thanks man!
Thank You for the efforts. This is helpful! ⭐
Wow man this huge level of work great !thanks for your effort ! god bless you
Thank you Basha!
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.
Great work man!
Keep going.
Thanks mate! Appreciate your video!❤❤
Very good explanation my friend ! Thanks a lot !
Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir
Keep this channel up man, it will be even more popular, and will help even more people.✴
Big appreciate your work!! ❤
Wonderful series, thank you so much.
You are making wonderful tutorials.Thanks a lot ❤
so many many widgets!!
Thanks. :)
All the widgets in the docs, thats insane
Absolute mad Lad! Love it!!
Absolute Legend! 👑
Good job! Thank you very much!
incredible.. thanks for ur effort to making this video man🚀🔥
Thanks!
Great!! I was doing something like this, but i only have 82... 😅😅. Thanks for doing this Great project 👏👏👌
thanks for not putting a long intro
Insane work. I just looked for a drop, now i found the ocean.
😂😂 Thank you!
Thanks!
Thanks for your great video :)
Thank you Andrew! I hope this helped you discover at least one new widget! 🔥
VERY USEFUL! THANK YOUU!
Say SizedBox one more time.... lol. Great video man. Thanks.
Amazing !!! Thanks Brother
Great work buddy 👍👏
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
I couldn't find mooner widget?
😊 I can't wait to be a Pro by the end of this course alone
Thanks man and God be praise
Really appreciate this man, 😁 now i can sleep well
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.
Thank you Hassan! Wish you the best in your Flutter journey! 🤝🔥
Nice work !!! Great work dude😍 ....Now no need to worry about finding widgets in Google 😍
Awesome, I was looking for gold but I found diamond, thank you man.
lol, thank you man!
Appreciated ❤
Excellent video.
Great Video
This was exactly what I wanted, "Odin is with us"
Great work !
Thanks!
Salute you already got my respect
Best video of the year ❤❤
God bless you in abundant Sir
thank you I love your channel 😍🥰
Thank you all bro !
Great Work!!!
Thank you!
Wow this is awesome 😍👍
Thanks Adam!
You are awesome ❤
I hope you have a good day
So can you make the code able to download for we can use it in parallel thanks
You are just awesome 💯💯
thanks for this video , on three hours only.
loved it, what is the visual studio theme you're using?
I use the default dark theme 👏
it is a realy good example to multiple widgets of flutter. but could u share these code?
Favourite video on UA-cam
Lol, thanks!
you are sick bro
thanks
Very very useful video
amazing!
You forgot the mooner widget! But great work anyways 😉
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
Should a create a pdf file or is it already created by someone?
Amazing..
🔥🔥
님 짱인듯..👍
Anyone can learn flutter through this video
Очень круто. Спасибо за ваш труд!
Жалко только, что про mooner widget забыл рассказать. А так-то, конечно, очень хорошую работу проделал.
This is insane, divine work. You only forgot the ButtMark Widget, but i'ts still great! Thanks for the video.
😂 Thank you!
Duuude! Damn!! This tutorial is hot af!
Glad you like it Lux🔥🔥
forever in debt with you, not only me but the whole flutter community.
Pleasure to share!
❤❤❤😢 so inspirational
This is really good content!
But UA-cam 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. UA-cam 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.
by the way i miss "System Mouse Cursors", "Physical Shape" and "Placeholder" up to here ("Padding"). Maybe something went wrong
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. 👍
Thank you very much, but you forgot about the mooner widget.
Can you make a video about it?
😂 Yeah I'll do a video about this new widget soon, its really cool!
What is mooner widget I couldn't find it?
@@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.
@@AliKhatib100 wow and everybody is asking this question in chats 😅🤣
How could you forget the mooner widget?
😂 Man I know... All this work and I forgot 1 Widget... Thanks Hassan!
Kgoši!! (Means King in Sepedi- One of Official South African Languages)
Notification ganggg 💪
You forgot Theo mooner widget!!! 😅
Finally... You did it !! Kiddos
Yes! It's finally over 😂
you forgate the mooner widget 👀
Can u add some of time stamp on description
It also work as chapter
True!, the problem is... the description only access 5000 characters and I can't put all the timestamps here. Do you have a solution?
0:00 bookmark for later
🕵️
You forgot the mooner widget
You forgot mooner widget.
Damn! I guess it should have been 216 widgets...😂
Man u forgot the Moone 🌙 Widget lol.
Yeah.. A lot of people has mention it... I'll do a other video to explain this new widget 🙏
215 widgets :)))))))))
a french accent lol
INSTANT LIKE LOL 🤣🤣🤣
Thanks!
i though flutter is a drag and drop tool. soooo much coding
😂😂 More coding, more options
thank you very much ....
Thank you too!
For all flutter developer please subscribe this channel, love their works 🔥🔥🔥🔥🔥🔥🔥
Thank you Deviot! 👏
Big love
thanks
You forgot mooner widget.
Damn!! So close from perfection! 😂
I agree, mooner widget is most underutilised and underappreciated widget. I wish more people know about this.