Flutter Hooks - Say Goodbye To Stateful Widget

How to get rid of StatefulWidget boilerplate and make your code reusable.
Code:
github.com/avalanche-tm/youtu...
Twitter: @Avalanche_tm9
#flutter #hooks #widget

[@alexeycherkashin6251]

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]

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

[@OscarAlmgren]

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]

@@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]

@@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."

[@roulzhq]

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

[@ezeaguprincewill7005]

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

[@xerotolerant]

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.

[@trevor6846]

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]

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

[@prathameshsundaram7509]

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

[@alvin3171997]

Great fireship vibes, clean and simple 👍

[@avalanche2073]

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

[@guestofallah7661]

@@avalanche2073 u r doing great ,keep it up

[@dennisbarzanoff9025]

Right! I noticed that too! Love to see that

[@ZackMitkin]

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.

[@JimGomes]

Great introduction and overview to Flutter Hooks. Thanks!

[@avalanche2073]

You are welcome good sir!

[@theLaughRiot00]

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

[@rriicckkyyss]

Great explanation, awesome video!

[@TheCaptSmile]

Cool motivated and understandable video presentation. Thx a lot!

[@rajesearisonmoise]

Thank you so much I love it !!!

[@Tokieejke]

Instant subscribe, awesome content!

[@Nackenschelle]

high quality video, thanxx

[@lijack446]

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

[@chandansharma8658]

Great video amigo. Keep up the good work

[@39strife]

hey alright

[@swostikgautam5836]

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

[@avalanche2073]

New video is in the making!

[@RivaanRanawat]

Amazing video 🤩

[@babyboie20]

Super dope!

[@adusparx]

* Coughs in React *

[@dakunskye]

+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]

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

[@lugardjulien5326]

perfect video dude just perfect

[@dennisbarzanoff9025]

Bro im subscribing just because of this video

[@avalanche2073]

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

[@mishalhaneef3723]

Neet! Thanks for this

[@ekopurnomo9221]

Very nice

[@alexamancio6761]

Great work.

[@avalanche2073]

Thank you very much, kind sir!

[@dev_jeongdaeri]

So cooool! 😎

[@zhangkevin8147]

Nice share.Thanks!

[@rsocial453]

Thank you so much

[@avalanche2073]

You are welcome!

[@tananga1523]

Great video

[@avalanche2073]

Thanks!

[@mohamedmahadfarah4057]

Great !

[@detaaditya6237]

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

[@avalanche2073]

Liked what you saw? Check out my other video kzbin.info/www/bejne/gWTNYWmvlNBnsK8

[@priyangpatel8135]

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

[@deepL0]

What a video and tutorial

[@ChristianKyony]

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

[@avalanche2073]

That is a great choice, sir!

[@ChristianKyony]

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

[@avalanche2073]

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

[@loyedev513]

Hi. What extension view tree in code???

[@klutch4198]

Outstanding!

[@binarnesia]

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

[@avalanche2073]

Happy times

[@prudhvirajchowhan]

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

[@avalanche2073]

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

[@realfootball338]

Good, same as React.

[@altafxx]

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

[@avalanche2073]

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

[@mishalhaneef3723]

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

[@o.sunsfamily]

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

[@neuzen]

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

[@esmailkhorchaniarts1142]

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

[@iabhishekpatil4415]

Last enjoyable fish got like

[@ck-the-terrible]

aw sweet! flutteract.

[@3king78]

GetX go！🥰

[@sahil1307]

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

[@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

[@RaviGupta-om3vx]

Hey how did the path in terminal get too short

[@avalanche2073]

PROMPT_DIRTRIM=1

[@luisrogelio98]

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

[@noureddineettouzany843]

[@gadget348]

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.

[@MsVsmaster]

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

[@avalanche2073]

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]

@@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]

​@@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.

[@xyunsx]

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

[@logandemir1635]

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

[@avalanche2073]

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]

@@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]

@@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!

[@aboasd685]

You are so fast just like a bullet

[@aguyoninternet9883]

Why do you sound like the old fireship? :)

[@avalanche2073]

Coincidence I guess :)

[@aguyoninternet9883]

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

[@avalanche2073]

@@aguyoninternet9883 DM me

[@aguyoninternet9883]

@@avalanche2073 Where shall I dm you tho :P

[@avalanche2073]

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

[@ronaldoSf]

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

[@khuongduong9249]

Flutter hooks bring all concept react into flutter.

[@medsed1133]

Which is messed up

[@theguy4084]

Getx is another way not to use statefull widget

[@mahasiswamurni]

is it jokes video?

[@neoprint3d]

Everything is becoming react lol

[@KangJangkrik]

Lol flutter is becoming react

[@nanonkay5669]

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

[@ShalehTonmoy]

0:37 triggered 😢

[@avalanche2073]

😢

[@justintie]

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

[@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]

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!

[@medsed1133]

Incredibly useless

[@radomane]

This is cursed and I hate it.

[@mykhailokeryta120]

Skip

[@opst1704]

- 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]

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

[@ykorshev]

Another stupid bicycle to add another level of complexity.

[@avalanche2073]

Seems like Google translate has failed you mate. Cheers!

[@ykorshev]

@@avalanche2073 idgf