Flutter Hooks - Say Goodbye To Stateful Widget

Поділитися
Вставка
  • Опубліковано 13 гру 2024

КОМЕНТАРІ • 119

  • @alexeycherkashin6251
    @alexeycherkashin6251 2 роки тому +55

    For those are not aware - React used to have stateless statefull widgets (they call it components but it doesn't matter) as well as mixins for sharing logic. And they moved out of this concert to hooks because of the reasons mentioned on the video: less boilerplate code and sharing similar logic between widgets. So it's not "yet another boring concert which makes my life harder". No, it's a step of code design evolution. People already faced problems with the current Flutter way and solved them. Flutter community needs to go through the process though and realize the same things on their own.

    • @avalanche2073
      @avalanche2073  2 роки тому +9

      I'm glad some people like you either did the research or talk out of experience before jumping to conclusions. Thanks mate!

    • @OscarAlmgren
      @OscarAlmgren 2 роки тому +2

      Excellent addition to this video. Question; as a Flutter apprentice (reading the Ray Wenderlich Flutter apprentice book tutorials) I'm still going to learn the old school way of Stateful Widgets because it's such an integral part of Flutter. Using these Flutter Hooks in the future though, when would it make best sense to start learning on how to use Hooks the proper way?
      After Stateful Widgets or after State Management (BLoC, Provider etc), or somewhere even later like after REST/Graph API calls and futures?

    • @avalanche2073
      @avalanche2073  2 роки тому +6

      @@OscarAlmgren Having a good understanding of Stateful Widget and default setState state management is a must for anyone getting into Flutter. I would suggest follow whatever curriculum your book is offering and try to build your own applications with that knowledge. The need for something like Flutter Hooks package comes once you start to understand some of the 'annoyances' or shortcomings of the default design. You'll get there, but make sure you don't skip steps in between.

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

      @@avalanche2073 I loved this rationale: "The need for something like Flutter Hooks package comes once you start to understand some of the 'annoyances' or shortcomings of the default design."

  • @alvin3171997
    @alvin3171997 2 роки тому +20

    Great fireship vibes, clean and simple 👍

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

      Thanks mate. Just doing what I know until I discover my own style.

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

      @@avalanche2073 u r doing great ,keep it up

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

      Right! I noticed that too! Love to see that

  • @trevor6846
    @trevor6846 2 роки тому +6

    Awesome bro! I've been working with flutter_hooks for a while now, and it's so pleasing to not have to convert to a Stateful widget for small things 🙏🏼
    Hope to see more useful content like this! 😉

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

      I'm glad you like it. New video is coming in a week!

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

    I remember how much of a time save react hooks were when they were introduced. It was so enormous that I might very well use this in my current project.

  • @dakunskye
    @dakunskye 2 роки тому +19

    +1 in presentation, but one of the biggest issues I had learning Flutter was actually packages like this.
    useState is a valueNotifier, HookWidget is a statelessWidget(sorta), HookBuilder is AnimatedBuilder.
    Working with a whole other set of terminologies that already exist in the toolkit is just bloating and slowing developers down. Please consider this effect when you tote around a package as time saving.

    • @avalanche2073
      @avalanche2073  2 роки тому +15

      I appreciate your input but I strongly disagree with what you said. Cheers!

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

    For the first time, I finally get to understand the usage of hooks package. Thanks bro.

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

    I like the stateful api (the flutter way) and I can dive into it by reading the flutter source code.

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

    I don't work with flutter, but youtube recommended me this video and I love small channels with tech content. Keep it up!

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

    Great introduction and overview to Flutter Hooks. Thanks!

  • @detaaditya6237
    @detaaditya6237 2 роки тому +2

    My mind is blown away over useTextEditingController. It significantly reduces the code!

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

    Ok found another amazing account... Looking forward to your next video.

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

    Good intro to hooks in flutter. I saw this package around but didn't think much of it, I work mostly in react and this would actually be so much easier for a react dev to pickup flutter. I really dislike flutter currently since it feels like react before hooks with all it's state management libraries and boilerplate oop.

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

    This is a great intro! Thanks for the video! Can't wait for more.

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

    * Coughs in React *

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

    That's nice, from React native background it helps a lot to me. Nice video. Thanks 🙏

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

    After watching this I (react dev) feel like I can give it a spin to flutter

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

    high quality video, thanxx

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

    Bro im subscribing just because of this video

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

      I'm glad you're making good life choices sir!

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

    Cool motivated and understandable video presentation. Thx a lot!

  • @chandansharma8658
    @chandansharma8658 2 роки тому +2

    Great video amigo. Keep up the good work

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

    Great explanation, awesome video!

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

    Hi. What extension view tree in code???

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

    what extension is that? The one with the tree pattern thing on each starting of the element

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

      Not sure which one you mean. I have only docker, thunder client and flutter extensions besides standard stuff.

    • @msl-droid
      @msl-droid 2 роки тому +3

      That's not a extension.. It's inbuilt vs code setting alng with flutter.. You can enable following by this
      Go to setting and search dart
      And you will find this settinf there
      *Dart:Preview Flutter Ui*
      Enable this

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

    Great job, I am starting with Riverpod and I intend to use hooks

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

      That is a great choice, sir!

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

      @@avalanche2073 Are you planning a video on how to structure a medium-to-high size application with Riverpod, Firebase, hooks, routing and testing?

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

      @@ChristianKyony Yes, I am planning to do a video that will include Riverpod, Hooks and folder structure for larger apps!

  • @RivaanRanawat
    @RivaanRanawat 2 роки тому +2

    Amazing video 🤩

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

    what is extension you used to highlight nesting of your code ?? For instance at 4:20 of the video

    • @avalanche2073
      @avalanche2073  2 роки тому +2

      It comes with Flutter extension. You can activate it in your settings, just look for Dart: Preview Flutter Ui Guides

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

    Instant subscribe, awesome content!

  • @o.sunsfamily
    @o.sunsfamily 2 роки тому

    Firstly, thank you for the video! Secondly, which VSC extension / setting is responsible for this visible scaffolding:
    |
    |
    -
    It is rather aesthetically pleasing.

  • @binarnesia
    @binarnesia Рік тому +1

    now it's time to refactor the code of my project

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

    Thank you so much I love it !!!

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

    perfect video dude just perfect

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

    I truly hate hooks from the bottom of my heart and soul. What a disgrace.

    • @avalanche2073
      @avalanche2073  2 роки тому +2

      If you hate something so much it's probably because you fear it. And you fear it because you don't understand it. Fear leads to anger, anger leads to hate, hate leads to suffering. You are clearly on the path to the dark side, mate.

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

      @@avalanche2073 no mate, I have over 17 years experience in various languages and frameworks. I just hate the hooks method. I have spent over a day to solve basic issues and I hate it. I use Angular for creating webapps btw. Mobx + next + react class is the way to go for me.

    • @avalanche2073
      @avalanche2073  2 роки тому +2

      @@logandemir1635 If it doesn't work for you that's fine. The most important thing is you are happy doing things the way you do. Just don't forget to keep your mind open and open up to new things from time to time. Cheers mate!

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

    Thank you so much

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

    Great video

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

    Now I wait for JSX like syntax extension and may be Flutter would be usable.

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

      DartX xD
      Would be nice to use XML for building ui instead of instanciating bunch of constructors inside each others

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

    Super dope!

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

    can somebody tell me if there's a structured resource for learning flutter in detail from basic (

    • @ObinnaWGMI
      @ObinnaWGMI Рік тому

      Learned from Max(Academind) on udemy. Literally didn't even know coding like that and learnt frontend from there. Only thing is unlike React devs. Flutter devs essentially have to be full stack, because its startups that mostly use flutter

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

    Nice share.Thanks!

  • @msl-droid
    @msl-droid 2 роки тому

    Neet! Thanks for this

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

    So cooool! 😎

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

    Very nice

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

    Before you know it all widgets will be given a handle, then we'll be able to change properties and control the widgets behaviour elsewhere in the code by addressing it's handle, just like we could in other languages decade's ago. Currently it's like trying to do carpentry without a toolbox, so your chissle is kept in the first building you used it in, likewise with your mallet etc. Before you can continue with the current job you have to jump in your van and visit half a dozen other buildings to collect tools that should just be in your toolkit. It troubles me deeply that intelligent people could make this kind of shit up, but here we are.

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

    Why do you sound like the old fireship? :)

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

      Coincidence I guess :)

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

      @@avalanche2073 I also have a small youtube channel, do you want to collab by any chance

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

      @@aguyoninternet9883 DM me

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

      @@avalanche2073 Where shall I dm you tho :P

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

      @@aguyoninternet9883 I believe my email address should be listed in about section on my channel page

  • @ck-the-terrible
    @ck-the-terrible 2 роки тому

    aw sweet! flutteract.

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

    Good, same as React.

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

    Last enjoyable fish got like

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

    Great work.

  • @luisrogelio98
    @luisrogelio98 2 роки тому +6

    It's like React for Flutter! , great I hate it.

  • @RaviGupta-om3vx
    @RaviGupta-om3vx 2 роки тому

    Hey how did the path in terminal get too short

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

    What a video and tutorial

  • @3king78
    @3king78 2 роки тому

    GetX go!🥰

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

    If flutter is following this direction, we can expect JSX renders on the future.

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

      This is a huge misconception that needs to be addressed carefully. Flutter is not following React's direction. Flutter was actually inspired by React. As the matter of fact you already have a form of JSX in Flutter: widgets contain both logic, UI elements and styling tangled up together, just like React. You also have build method which very much works the same way as render function in React. Even the default state management in Flutter is same as in React! The purpose of Hooks in Flutter is the same as it was in React - to fix the flaws of the original design.

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

      @@avalanche2073 I don't think it is a misconception as I already saw proposals for JSX in flutter, but as the community didn't liked the design adoption, but it's proposed there, about the react flaw design is more about having the ability to create states for functional components which is whole different approach than class components life cycle, which leads most of developers that starts to it to get confused with the dependencies change and callbacks, the community liked that most so you can see the new implementations using it, but yet, class components is still here, I try to most of the time to use functional but with Flatlists unfortunately to avoid re-renders per scroll they recommend you to use class pure components.

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

      ​@@MsVsmaster I see what you mean. I wasn't aware of that proposal before and I agree it's a bad idea. There is a good reason why Flutter team chose nested class approach and Dart language vs Javascript and XAML like structure. Short answer is because there were some limitations which would prevent them to make such a good framework and also having a hot reload feature. If you think having functional Widgets would benefit you, feel free to check functional_widget package from the same author of flutter_hooks. I personally don't use it because it gets around Dart limitations (again limitations) with code generation - I'm not fan of that.

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

    Outstanding!

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

    Liked what you saw? Check out my other video ua-cam.com/video/K3j06y_k4zM/v-deo.html

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

    Great !

  • @ronaldoSf
    @ronaldoSf 2 роки тому +2

    Omg noo. I hate people trying to reinvent the well. Flutter is fine.

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

    this is now react 🙆‍♂️🙆‍♂️🙆‍♂️

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

    Flutter hooks bring all concept react into flutter.

  • @aboasd685
    @aboasd685 Рік тому

    You are so fast just like a bullet

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

    0:37 triggered 😢

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

    is it jokes video?

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

    Everything is becoming react lol

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

    Lol flutter is becoming react

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

    People will do anything but use React Native 🤦🏾‍♂️

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

    Another stupid bicycle to add another level of complexity.

    • @avalanche2073
      @avalanche2073  2 роки тому +2

      Seems like Google translate has failed you mate. Cheers!

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

      @@avalanche2073 idgf

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

    Getx is another way not to use statefull widget

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

    - Nice thumbnail, some effort was put to make it, probably the video content is nice too... great
    - Video content of first 10sec is probably made by 12 years old kid... goodbye

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

      I'm deeply sorry my content isn't mature enough for you :)

  • @medsed1133
    @medsed1133 2 роки тому +2

    Incredibly useless

  • @vladimirkraus1438
    @vladimirkraus1438 Рік тому

    I am afraid this video only makes sense if you already know what hooks are. If you have no clue what hooks are, than the video will leave just a big mess in your brain.

    • @avalanche2073
      @avalanche2073  Рік тому

      Hooks, just like GetX, Bloc and others are concepts. They have implementations in multiple languages and frameworks but concept is the same. Focus of this video is how to use them, not how they work under the hood. Actually if you go to pub site of the package you can find very good and short explanation with code examples. Cheers!

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

    This is cursed and I hate it.

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

    flutter is getting reactified, just goes to show how awesome react is

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

    Skip