All Flutter Widgets Explained: Your Essential Guide

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 149

  • @FlutterMapp
    @FlutterMapp  2 года назад +60

    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
      @zekaidemir9304 2 года назад +1

      The really best content. Thank for your awesome work

    • @biigsmokee
      @biigsmokee Год назад +1

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

    • @FlutterMapp
      @FlutterMapp  Год назад +1

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

  • @lonerider9645
    @lonerider9645 2 года назад +61

    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
      @FlutterMapp  2 года назад +14

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

  • @andrewxu9342
    @andrewxu9342 9 месяцев назад +2

    Thanks for your great video :)

    • @FlutterMapp
      @FlutterMapp  9 месяцев назад +1

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

  • @milosivackovic
    @milosivackovic 8 месяцев назад +2

    Thanks!

  • @syedaliiiabbas
    @syedaliiiabbas 2 года назад +2

    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

  • @Adde974
    @Adde974 Год назад +5

    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.

  • @Gu.henning
    @Gu.henning Год назад +5

    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
    @RivaanRanawat 2 года назад +29

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

    • @FlutterMapp
      @FlutterMapp  2 года назад +7

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

  • @princesiachin279
    @princesiachin279 2 месяца назад

    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

  • @ArkaRoy10
    @ArkaRoy10 6 месяцев назад

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

  • @Tyrowo
    @Tyrowo Год назад +3

    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
      @FlutterDudexd 6 месяцев назад

      I couldn't find mooner widget?

  • @bashasha
    @bashasha 2 года назад +5

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

  • @autozone5335
    @autozone5335 2 года назад +2

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

  • @anshusingh6116
    @anshusingh6116 8 месяцев назад

    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.

  • @marufhassan634
    @marufhassan634 2 года назад +4

    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
      @FlutterMapp  2 года назад +1

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

  • @marufhassan634
    @marufhassan634 2 года назад

    All the widgets in the docs, thats insane

  • @haitam1234-j6e
    @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

  • @njo_lv
    @njo_lv Год назад

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

  • @rahulkp1852
    @rahulkp1852 Год назад +1

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

  • @AzticAztin
    @AzticAztin 2 года назад

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

  • @ExtendedhighlightsNew
    @ExtendedhighlightsNew Год назад

    Thanks mate! Appreciate your video!❤❤

  • @hugovicfortman
    @hugovicfortman 7 месяцев назад

    Absolute Legend! 👑

  • @anasalbattiri003
    @anasalbattiri003 Год назад +1

    Great work man!
    Keep going.

  • @pravinprince3221
    @pravinprince3221 Год назад

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

  • @antenehprime9012
    @antenehprime9012 2 года назад +1

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

  • @enslow
    @enslow Год назад

    so many many widgets!!
    Thanks. :)

  • @rajatdas6133
    @rajatdas6133 11 месяцев назад

    Great work buddy 👍👏

  • @SDDinushanShehandinushan
    @SDDinushanShehandinushan Год назад

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

  • @m.sulthanalihsan464
    @m.sulthanalihsan464 2 года назад

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

  • @imGhare
    @imGhare Год назад

    thanks for not putting a long intro

  • @nano32473
    @nano32473 Год назад

    Very good explanation my friend ! Thanks a lot !

  • @shahabjoon201
    @shahabjoon201 Год назад

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

  • @RajA-me9cl
    @RajA-me9cl 2 года назад

    Thank You for the efforts. This is helpful! ⭐

  • @notify7610
    @notify7610 Год назад

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

  • @kbyo2006
    @kbyo2006 2 года назад +1

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

  • @amirsalarsalehi4968
    @amirsalarsalehi4968 7 месяцев назад

    Amazing !!! Thanks Brother

  • @kalderDean
    @kalderDean 2 года назад

    Absolute mad Lad! Love it!!

  • @af20091
    @af20091 Год назад

    You are making wonderful tutorials.Thanks a lot ❤

  • @kheehao9102
    @kheehao9102 2 года назад

    Big appreciate your work!! ❤

  • @rise4gamers506
    @rise4gamers506 Год назад

    Best video of the year ❤❤

  • @tlawlessrr-vid-archive
    @tlawlessrr-vid-archive Год назад

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

  • @madjours
    @madjours Год назад

    Wonderful series, thank you so much.

  • @binarnesia
    @binarnesia Год назад

    Really appreciate this man, 😁 now i can sleep well

  • @jokerbanny
    @jokerbanny Год назад

    Thank you all bro !

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

    Good job! Thank you very much!

  • @TheCastagna96
    @TheCastagna96 Год назад

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

    • @FlutterMapp
      @FlutterMapp  Год назад

      I use the default dark theme 👏

  • @noeljose
    @noeljose 2 года назад +1

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

  • @john_3313
    @john_3313 Год назад

    VERY USEFUL! THANK YOUU!

  • @gabrielartioli6894
    @gabrielartioli6894 2 года назад +2

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

  • @zeb_lala134
    @zeb_lala134 Год назад

    Favourite video on RUclips

  • @AdamcyNaira
    @AdamcyNaira 2 года назад

    Wow this is awesome 😍👍

  • @rifat018
    @rifat018 26 дней назад

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

  • @rnabyankitavasthi
    @rnabyankitavasthi 7 месяцев назад

    Great Video

  • @fatima-cf1bj
    @fatima-cf1bj 2 года назад

    thank you I love your channel 😍🥰

  • @jvlamy
    @jvlamy 2 года назад

    Great work !

  • @skullerhood
    @skullerhood Год назад

    You are awesome ❤

  • @oswaldoolea2889
    @oswaldoolea2889 2 года назад +2

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

  • @ss7528divers
    @ss7528divers 12 дней назад

    Legend!

  • @engroga
    @engroga Год назад

    Excellent video.

  • @mohammadkashif5441
    @mohammadkashif5441 2 года назад

    Appreciated ❤

  • @alexofori6565
    @alexofori6565 2 года назад

    God bless you in abundant Sir

  • @smootherthan.butter
    @smootherthan.butter 2 года назад

    Salute you already got my respect

  • @theloner3744
    @theloner3744 11 месяцев назад

    thanks for this video , on three hours only.

  • @ul-educate4090
    @ul-educate4090 2 года назад

    You are just awesome 💯💯

  • @saqqara6361
    @saqqara6361 2 года назад

    Great Work!!!

  • @thorbenschott2481
    @thorbenschott2481 Год назад

    This is really good content!
    But RUclips 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. RUclips 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
      @thorbenschott2481 Год назад

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

    • @FlutterMapp
      @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. 👍

  • @arslanAshh
    @arslanAshh Год назад +4

    Anyone can learn flutter through this video

  • @lux_auram
    @lux_auram 10 месяцев назад

    Duuude! Damn!! This tutorial is hot af!

    • @FlutterMapp
      @FlutterMapp  10 месяцев назад

      Glad you like it Lux🔥🔥

  • @miguel_franca
    @miguel_franca Год назад

    You forgot the mooner widget! But great work anyways 😉

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

  • @junveld4830
    @junveld4830 7 месяцев назад

    you are sick bro

  • @routeewang4437
    @routeewang4437 Год назад

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

  • @mohammadfekri4987
    @mohammadfekri4987 5 месяцев назад

    tanx for nice video

  • @jawwaadsabree5573
    @jawwaadsabree5573 2 года назад

    ❤❤❤😢 so inspirational

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

  • @gautamgohil7036
    @gautamgohil7036 2 года назад

    Very very useful video

  • @lucky520ytc
    @lucky520ytc 2 года назад +1

    Notification ganggg 💪

  • @MadeInPython
    @MadeInPython Год назад

    0:00 bookmark for later

  • @AliKhatib100
    @AliKhatib100 2 года назад

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

    • @FlutterDudexd
      @FlutterDudexd 6 месяцев назад

      What is mooner widget I couldn't find it?

    • @AliKhatib100
      @AliKhatib100 6 месяцев назад +1

      @@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
      @FlutterDudexd 6 месяцев назад

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

  • @haphaptvl
    @haphaptvl 2 года назад

    님 짱인듯..👍

  • @Jivaa
    @Jivaa 2 года назад

    Finally... You did it !! Kiddos

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

      Yes! It's finally over 😂

  • @CloudyOp_21
    @CloudyOp_21 4 месяца назад

    Dangerous 🎉

  • @stephanodev
    @stephanodev 2 года назад

    amazing!

  • @karabongwato3391
    @karabongwato3391 Год назад

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

  • @СтаниславЛагун-х4й
    @СтаниславЛагун-х4й 2 года назад

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

    • @-Sergey
      @-Sergey Год назад

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

  • @baknguen
    @baknguen 5 месяцев назад

    thanks

  • @ImLay-Z
    @ImLay-Z Год назад

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

  • @abinavm358
    @abinavm358 10 месяцев назад

    Amazing..

  • @jassem500
    @jassem500 Год назад +1

    you forgate the mooner widget 👀

  • @yahya2892
    @yahya2892 Год назад

    thanks

  • @rafaeldaime
    @rafaeldaime Год назад

    You forgot Theo mooner widget!!! 😅

  • @marufhassan634
    @marufhassan634 2 года назад

    How could you forget the mooner widget?

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

  • @fkadeal
    @fkadeal 2 года назад

    Can u add some of time stamp on description

    • @fkadeal
      @fkadeal 2 года назад

      It also work as chapter

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

  • @akshattamrakar9071
    @akshattamrakar9071 2 года назад +2

    You forgot mooner widget.

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

  • @rajatdas6133
    @rajatdas6133 11 месяцев назад

    You forgot the mooner widget

  • @vuntaleelaprasadvuntaleela517
    @vuntaleelaprasadvuntaleela517 Месяц назад

    ❤❤🎉

  • @idanbiton5407
    @idanbiton5407 2 года назад

    Man u forgot the Moone 🌙 Widget lol.

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

  • @muhammadyusoffjamaluddin
    @muhammadyusoffjamaluddin 2 года назад

    INSTANT LIKE LOL 🤣🤣🤣

  • @adomicarts
    @adomicarts 2 года назад

    🕵️

  • @AnNguyen-fh4kb
    @AnNguyen-fh4kb Год назад

    215 widgets :)))))))))