Top 10 Widgets every Flutter Developer should know!

Поділитися
Вставка
  • Опубліковано 22 лип 2024
  • #flutter #google #mobileapp
    Hey Everyone! In this video we will be talking about top Flutter Widgets that every Developer should know ! We won't be discussing about more basic widgets such as Column, Row, Container etc. Here are Timeline tags for you to skip to a widget that interests you:
    ✔ SafeArea Widget : 00:35
    ✔ Wrap Widget : 02:17
    ✔ RichText Widget : 04:20
    ✔ ClipRRect Widget : 06:25
    ✔ MediaQuery : 07:32
    ✔ FutureBuilder : 10:25
    ✔ Flexible :12:50
    ✔ SizedBox : 14:36
    ✔ Align : 16:02
    🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
    👉 Flutter Shape Maker: fluttershapemaker.com
    🔥 Learn About the Most Important Widgets in Flutter 👇:
    👉 Widget Essentials Series: bit.ly/3GpfiYw
    👉🏻 Product Hunt: www.producthunt.com/posts/flu...
    (Your UPVOTE Means a lot! 🙌)
    If you find this video useful consider Supporting @RetroPortal Studio :
    👉 Buy Me a Coffee: www.buymeacoffee.com/theretro...
    👉 Patreon: / retroportalstudio
    Social Links @RetroPortal Studio :
    👉 Twitter: / theretroportal
    👉 Medium: / retroportalstudio
    👉 Instagram: / retroportalstudio
    👉 Patreon: / retroportalstudio
    👉 GitHub: github.com/retroportalstudio
    If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
    Thank you for Watching! Happy Coding :)

КОМЕНТАРІ • 191

  • @maconbacon
    @maconbacon 4 роки тому +180

    About the ClipRRect, use it only as a last resort, it is performance heavy on the hardware
    For instance, you can add rounded corners to a Container using the built in decoration

    • @aislanarislou
      @aislanarislou 4 роки тому

      humm nice to know!

    • @alrobenadrianegoh3469
      @alrobenadrianegoh3469 4 роки тому +19

      Funny how OP likes almost all of the comments except this, the highest liked comment.

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +10

      @@alrobenadrianegoh3469 LOL

    • @cularu1
      @cularu1 4 роки тому +3

      Op is learning... Not an expert.

    • @xXLanyuzAnlunXx
      @xXLanyuzAnlunXx 4 роки тому +6

      @@cularu1 He should still take advice. At least he didn't remove or hide this comment from the video.

  • @RetroPortalStudio
    @RetroPortalStudio  4 роки тому +4

    If you find this video useful, consider Following me on:
    Twitter: twitter.com/theretroportal
    Instagram: instagram.com/retroportalstudio
    LinkedIn: www.linkedin.com/in/parasjainrps
    Happy Coding! ✌️😁

  • @8ysuzaen3
    @8ysuzaen3 4 роки тому +2

    I like your videos, simple and straightforward. It's not boring.

  • @RohanBojja
    @RohanBojja 4 роки тому +2

    Future builder is insane, changed the way I write code now. Thanks!

  • @abraiyan7984
    @abraiyan7984 4 роки тому +4

    Hey, make a video about your journey of laerning flutter, how and what you did to accomplish this. You almost know everything about every widget man! Awesome!

  • @user-nv6zs8nt9e
    @user-nv6zs8nt9e 4 роки тому

    플러터를 시작한지 얼마 안되는데 너무 도움이 되는 영상이었어요!! 구독과 좋아요 해드렸습니다~

  • @ayoze013
    @ayoze013 4 роки тому +48

    This video should be in "top 10 videos every flutter dev should watch".

  • @jackshephard7920
    @jackshephard7920 4 роки тому +1

    Really helpful tutorial! I’m looking forward more. Thanks

  • @jorgewandersantanaurena422
    @jorgewandersantanaurena422 4 роки тому +2

    Great video 😍, amazing job there. I like your video description 👌 using an index to check any content in a faster way. Thanks

  • @johnny.s7036
    @johnny.s7036 4 роки тому +7

    very useful and simple examples,thank you

  • @rohanskoshti
    @rohanskoshti 3 роки тому +1

    Nice tutroal. Helpful. Although I developed 3 apps till now, there is plenty of stuff to learn every new day.

  • @andyz5160
    @andyz5160 4 роки тому +1

    Very concise and helpful. Thanks!

  • @therock7014
    @therock7014 2 роки тому +1

    Thank you for this video 😉 i now understand how to code. Not that much but atleast i gain knowldege from this tutorial 😉.
    Thank you godbless

  • @phamphuhungtran5271
    @phamphuhungtran5271 4 роки тому +2

    Very helpful and easy to understand. Thank you so much.

  • @giyutomioka8112
    @giyutomioka8112 4 роки тому +2

    I was so impressed by the beginning only that I watched all 4 ads included. Amazing work. You made my life much easier.

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому

      Thank you so much for your support brother ✌😁👨‍💻

    • @tomvanlieshout524
      @tomvanlieshout524 4 роки тому +1

      @@RetroPortalStudio Your videos are great. I'd just like to give a tiny bit of feedback: the audio is clipping sometimes. Maybe look into a good (dynamic) microphone :-) (it would also eliminate most of the background noise)

  • @f00kwhiteblackracismwarsh07
    @f00kwhiteblackracismwarsh07 4 роки тому +2

    It’s should be a must know instead!
    Good job 👏🏼👏🏼👏🏼

  • @pinishlomi
    @pinishlomi 4 роки тому +1

    Very useful and helpful examples, I’m looking forward more. Thanks

  • @visakhraman4539
    @visakhraman4539 4 роки тому +2

    This helped in so many ways.. Thank you. :)

  • @MistaWu
    @MistaWu 4 роки тому +5

    Thank you very much, this really helped...

  • @jeffdavies2824
    @jeffdavies2824 4 роки тому +3

    I wish I could give more than 1 thumbs up! Say hello to your newest subscriber! Great work!

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +1

      Thank you so much for your support! Means a lot ✌😁

  • @leonvanrijswijk8409
    @leonvanrijswijk8409 4 роки тому +5

    This is great! Practical and simple examples. Would be nice if you would make this a series.

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +1

      Thank you! Will try putting out more videos like this! 😁✌

  • @davidokoroafor1576
    @davidokoroafor1576 3 роки тому

    Wonderful very educative. thanks!!!!

  • @oscarsans3610
    @oscarsans3610 4 роки тому +6

    I've just discovered your channel and it looks very good!

  • @polapavithra8709
    @polapavithra8709 4 роки тому

    I am trying to put search bar in my ecommerce app, can you help me that how to display my products in that search bar and if we click that it should goto that particular product.

  • @taverasmisael
    @taverasmisael 4 роки тому +11

    Amazing video and great examples, not the typical top X stuff. +1

  • @erperejildo
    @erperejildo 4 роки тому +1

    Quick and useful. Thanks dude

  • @mahdiaspanani8004
    @mahdiaspanani8004 4 роки тому +1

    very useful and simple thank you so much.

  • @pcac4798
    @pcac4798 3 роки тому +1

    WOW Nice channel with very nice and valuable tutorials. It helped alot. Thanks

  • @trungnghia2938
    @trungnghia2938 4 роки тому +1

    Useful video, I should get all of them
    Thanks

  • @elephant_888
    @elephant_888 4 роки тому +2

    Very helpful! Thanks!!

  • @psalmlimpin9829
    @psalmlimpin9829 2 роки тому +1

    Thanks for this man!

  • @MuteSymphony
    @MuteSymphony 4 роки тому +1

    Incredible.
    Following from Brazil

  • @JS007
    @JS007 4 роки тому +1

    good share . learning a lot as a beginner. thank you

  • @adrianrauchle9441
    @adrianrauchle9441 3 роки тому +1

    thanks man this was a really good tutorial!

  • @omkarsutar5069
    @omkarsutar5069 4 роки тому +3

    Great video man, properly studied the widgets with examples, want more👍👍

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +1

      Thank you for your support! Will be coming up with videos! ✌😁

  • @ujjwalchetan4907
    @ujjwalchetan4907 5 місяців тому +1

    Quite useful. Thanks 😊

  • @isaacfrimpong9022
    @isaacfrimpong9022 4 роки тому +1

    I completely understand what you mean. Thanks!

  • @code_magpie
    @code_magpie 4 роки тому +1

    Thanks buddy! It was really a useful video.

  • @ny8895
    @ny8895 4 роки тому +22

    These widgets are really often used at work. So every Flutter developers have to remember the way to use these widgets at least.

  • @wisnuyogan
    @wisnuyogan 3 роки тому +1

    Thanks it's very helpful

  • @andressasouza6186
    @andressasouza6186 3 роки тому +1

    Very helpful, thank you very much!

  • @This-Is-The-End
    @This-Is-The-End 4 роки тому +1

    Very instructive video. Many thanks

  • @ramonwaia
    @ramonwaia 4 роки тому

    Nice vídeo and examples. I Will watch others vídeos. Great job.

  • @yesitshassan
    @yesitshassan 4 роки тому

    wait so i can use wrap like a row and column except i have more control in the direction?

  • @Thierry4Teen
    @Thierry4Teen 2 роки тому +1

    Such a great information for beginners keep it up

  • @soufianeallamou4451
    @soufianeallamou4451 4 роки тому +2

    Amazing video !! thanks man

  • @himanshudhakecha1789
    @himanshudhakecha1789 4 роки тому +1

    Its really helpful. Thanks

  • @cta537
    @cta537 3 роки тому

    Very good Tutorial.. Thks

  • @ravgeetdhillon2990
    @ravgeetdhillon2990 4 роки тому +1

    Wooahhh. Nice to know these things.

  • @villadseskesen
    @villadseskesen 3 роки тому +1

    Really nice and informative!

  • @Neerajkumar-xl9kx
    @Neerajkumar-xl9kx 2 роки тому +1

    wow great, awesome video

  • @shivorngeeth
    @shivorngeeth 2 роки тому

    what is your VS code extension to see that widget tree line ?

  • @mahmudurrahmanshovon185
    @mahmudurrahmanshovon185 4 роки тому +1

    Great video. very helpful

  • @waiyanphyo7
    @waiyanphyo7 4 роки тому +1

    Really Helpful video thx

  • @000qt
    @000qt 4 роки тому +1

    Very nice video.
    Thanks 👏👏👏

  • @PUBGGAMER-ef7nc
    @PUBGGAMER-ef7nc 2 роки тому +1

    Such a very useful video

  • @patrickniyogitare6555
    @patrickniyogitare6555 3 роки тому +1

    So helpful and well explained

  • @jeenyus9999
    @jeenyus9999 4 роки тому +1

    Great video! Keep it up,

  • @bennguyen1313
    @bennguyen1313 4 роки тому

    So is the widget built every time you change orientation.. that's why checking the orientation (MediaQuery) works?
    Regarding the FutureBuilder, instead of a Future/async function that returns data, is it possible to still display the CircularProgressIndicatorwhat but using a Stream/async*/yield function and async/listen in the widget's build?
    Love the idea of wrapping a button with SizedBox, that will come in handy!

  • @sommie4935
    @sommie4935 4 роки тому +4

    wish my Indian accent was as good as yours xD

  • @nelsonmei9527
    @nelsonmei9527 4 роки тому +1

    Great video!

  • @hashankannangara8723
    @hashankannangara8723 4 роки тому +1

    Great Video

  • @lasindunuwanga5292
    @lasindunuwanga5292 3 роки тому

    Awesome. Really awesome

  • @josecoverlessons
    @josecoverlessons 4 роки тому +1

    good stuff bro keep it up

  • @flutterplus
    @flutterplus 2 роки тому

    Whats different between flexible and Expanded ? ( each one has flex ) and we can set

  • @d-apps2699
    @d-apps2699 4 роки тому +1

    amazing video!!

  • @sourcecodedev2919
    @sourcecodedev2919 4 роки тому

    Great video and well explained

  • @caesardestura4681
    @caesardestura4681 4 роки тому

    Nice video very helpful especially for newbie like me. btw, how can i change the color of the scaffold class in vscode editor?

  • @tommus16
    @tommus16 4 роки тому +1

    Very useful !

  • @heebelee2258
    @heebelee2258 4 роки тому +1

    nice, thank you.

  • @jeromestsauver
    @jeromestsauver 4 роки тому +1

    Very Nice!

  • @mateus.bernardo
    @mateus.bernardo 4 роки тому +1

    Very good Man 👍👍

  • @harshjhunjhunuwala
    @harshjhunjhunuwala 4 роки тому

    Awesome content 👌

  • @litaoyang8801
    @litaoyang8801 4 роки тому +1

    very nice!

  • @viral_codes
    @viral_codes 4 роки тому +1

    Thank you sir

  • @jv18creator
    @jv18creator 4 роки тому +1

    Thank you.

  • @colephelps7321
    @colephelps7321 4 роки тому +11

    You could hide the project explorer, keep the ide ⅔ of the screen and show the app ui on screen all the time so that it's easier to understand what changed when you save the code

  • @ahmedalial-selmy895
    @ahmedalial-selmy895 3 роки тому +1

    Excellent 👍

  • @isaacfrimpong9022
    @isaacfrimpong9022 4 роки тому

    I like your video.

  • @juanversion3922
    @juanversion3922 3 роки тому +2

    Im falling inlove wd flutter

  • @rubiteve
    @rubiteve 4 роки тому +3

    Hey brother, love the video. Please make sure to make it at least 1080p. It's difficult to see. Other than that, it's great!

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +1

      Thank you for your support ✌😁 All the upcoming videos since last will be 1080 !

  • @akailok
    @akailok 3 роки тому

    Hey bro you explanation is best but can you develop small project in MVC you follow
    1.MVC
    2.Clean code
    3.Test cases
    4.multiple screen transition
    5.app deployment.
    Please can cover this topics ,so that we can build app.👍

  • @MrBa143
    @MrBa143 4 роки тому

    For loading in data from async functions, i simply checked
    _data != null ? return ListView... : return LoadingAnimation
    and in the async function, i just use "setState" on the _data variable, which will cause it to rebuild when the data has been fetched.
    You didn't show how FutureBuilder works, so i assume it somehow gets told automatically by the framework, when the data has arrived? and then it rebuilds the UI? because i couldn't really see the need to use it, from what you showed :-D

  • @Sandy-rv9tv
    @Sandy-rv9tv 3 роки тому

    Hi this is pretty useful
    Could you please do something similar with Animation widgets? That'll be awesome
    Thanks

  • @Sam-ch4jh
    @Sam-ch4jh 4 роки тому +1

    Thank you

  • @zakariyabilal6167
    @zakariyabilal6167 4 роки тому

    Thx bro

  • @codingright
    @codingright 4 роки тому +1

    great video

  • @dominikthurau9944
    @dominikthurau9944 4 роки тому +1

    Nice Video, but the Timestamp for Flexible don't work, because there is a "space" missing.

  • @navinandy8106
    @navinandy8106 3 роки тому +1

    👌 yea every dev should known

  • @tianyili6336
    @tianyili6336 4 роки тому +1

    Nice video! Can we have another episode? like Top 50 widgets

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +2

      Coming soon not 50 but yes its coming 🤩 With much more detailed look

  • @martindala
    @martindala 3 роки тому +1

    Very good ait video

  • @programan6391
    @programan6391 4 роки тому +1

    Thanks

  • @Abbici
    @Abbici 2 роки тому

    Hallo...
    My stupid question:
    How can I change a button color clicking another button?
    I imagine I have to put some name to avery button...
    Thank
    @}-,-'---------
    Gianfranco

  • @agredo
    @agredo 3 роки тому +1

    nice

  • @HungLe-rz9uu
    @HungLe-rz9uu 4 роки тому +1

    thanks

  • @amjedali82
    @amjedali82 4 роки тому

    Good job

  • @amirulfitri3751
    @amirulfitri3751 4 роки тому +2

    Great tuts! Btw, may I know how did you have that tree-like indent in your code? Is it from some kind of extension or vs code setting?

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому

      Thank you for your support! ✌😁 Its just default Android Studio brother ! No Extensions

    • @amirulfitri3751
      @amirulfitri3751 4 роки тому

      @@RetroPortalStudio ahhh didn't noticed that, thought you were using vs code 😅 thanks for responding 👍

    • @Spoantaneus
      @Spoantaneus 4 роки тому

      Amirul Fitri you can format your code in vs to make it look like that you can search for the shortcut

  • @panchcw
    @panchcw 4 роки тому +1

    interesting video

  • @barbosa7797
    @barbosa7797 4 роки тому +1

    Which key combo you pressed at 1:30 to open that menu to "wrap" things?

    • @yoryerpy
      @yoryerpy 4 роки тому +1

      In macOS the key combination is "Alt + Enter"

    • @barbosa7797
      @barbosa7797 4 роки тому

      @@yoryerpy thanks! Thats all I needed. 👊

  • @gokulmanohar5677
    @gokulmanohar5677 4 роки тому +1

    How did you wrap using the keyboard shortcut in ANDROID STUDIO?

    • @gokulmanohar5677
      @gokulmanohar5677 4 роки тому

      I meant converting into a child class

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому

      click on the widget that you want to wrap . Alt + Enter will show you the dialog on windows and then you can wrap it accordingly ✌😁