How to get rid of StatefulWidget boilerplate and make your code reusable. Code: github.com/avalanche-tm/youtu... Twitter: @Avalanche_tm9 #flutter #hooks #widget
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.
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?
@@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.
@@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."
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.
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! 😉
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.
+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.
Firstly, thank you for the video! Secondly, which VSC extension / setting is responsible for this visible scaffolding: | | - It is rather aesthetically pleasing.
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
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
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.
@@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.
@@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.
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.
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.
@@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.
@@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!
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.
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!
- 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
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.
I'm glad some people like you either did the research or talk out of experience before jumping to conclusions. Thanks mate!
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?
@@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.
@@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."
For the first time, I finally get to understand the usage of hooks package. Thanks bro.
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.
Great fireship vibes, clean and simple 👍
Thanks mate. Just doing what I know until I discover my own style.
@@avalanche2073 u r doing great ,keep it up
Right! I noticed that too! Love to see that
I don't work with flutter, but youtube recommended me this video and I love small channels with tech content. Keep it up!
This is a great intro! Thanks for the video! Can't wait for more.
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! 😉
I'm glad you like it. New video is coming in a week!
Great introduction and overview to Flutter Hooks. Thanks!
You are welcome good sir!
That's nice, from React native background it helps a lot to me. Nice video. Thanks 🙏
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.
Great explanation, awesome video!
Cool motivated and understandable video presentation. Thx a lot!
I like the stateful api (the flutter way) and I can dive into it by reading the flutter source code.
Instant subscribe, awesome content!
+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.
I appreciate your input but I strongly disagree with what you said. Cheers!
Thank you so much I love it !!!
Great video amigo. Keep up the good work
hey alright
high quality video, thanxx
* Coughs in React *
Ok found another amazing account... Looking forward to your next video.
New video is in the making!
Amazing video 🤩
Super dope!
Bro im subscribing just because of this video
I'm glad you're making good life choices sir!
Very nice
perfect video dude just perfect
Great work.
Thank you very much, kind sir!
Nice share.Thanks!
Thank you so much
You are welcome!
Hi. What extension view tree in code???
Neet! Thanks for this
Liked what you saw? Check out my other video czcams.com/video/K3j06y_k4zM/video.html
So cooool! 😎
My mind is blown away over useTextEditingController. It significantly reduces the code!
Great video
Thanks!
what is extension you used to highlight nesting of your code ?? For instance at 4:20 of the video
It comes with Flutter extension. You can activate it in your settings, just look for Dart: Preview Flutter Ui Guides
Great job, I am starting with Riverpod and I intend to use hooks
That is a great choice, sir!
@@avalanche2073 Are you planning a video on how to structure a medium-to-high size application with Riverpod, Firebase, hooks, routing and testing?
@@ChristianKyony Yes, I am planning to do a video that will include Riverpod, Hooks and folder structure for larger apps!
After watching this I (react dev) feel like I can give it a spin to flutter
Firstly, thank you for the video! Secondly, which VSC extension / setting is responsible for this visible scaffolding:
|
|
-
It is rather aesthetically pleasing.
what extension is that? The one with the tree pattern thing on each starting of the element
Not sure which one you mean. I have only docker, thunder client and flutter extensions besides standard stuff.
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
Great !
Outstanding!
What a video and tutorial
can somebody tell me if there's a structured resource for learning flutter in detail from basic (
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
Last enjoyable fish got like
Good, same as React.
Now I wait for JSX like syntax extension and may be Flutter would be usable.
DartX xD
Would be nice to use XML for building ui instead of instanciating bunch of constructors inside each others
Hey how did the path in terminal get too short
PROMPT_DIRTRIM=1
now it's time to refactor the code of my project
Happy times
aw sweet! flutteract.
GetX go！🥰
It's like React for Flutter! , great I hate it.
If flutter is following this direction, we can expect JSX renders on the future.
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.
@@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.
@@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.
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.
I truly hate hooks from the bottom of my heart and soul. What a disgrace.
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.
@@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.
@@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!
Why do you sound like the old fireship? :)
Coincidence I guess :)
@@avalanche2073 I also have a small youtube channel, do you want to collab by any chance
@@aguyoninternet9883 DM me
@@avalanche2073 Where shall I dm you tho :P
@@aguyoninternet9883 I believe my email address should be listed in about section on my channel page
this is now react 🙆♂️🙆♂️🙆♂️
is it jokes video?
You are so fast just like a bullet
Getx is another way not to use statefull widget
Flutter hooks bring all concept react into flutter.
Which is messed up
People will do anything but use React Native 🤦🏾♂️
Omg noo. I hate people trying to reinvent the well. Flutter is fine.
Everything is becoming react lol
Lol flutter is becoming react
0:37 triggered 😢
😢
flutter is getting reactified, just goes to show how awesome react is
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.
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!
- 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
I'm deeply sorry my content isn't mature enough for you :)
This is cursed and I hate it.
Incredibly useless
Another stupid bicycle to add another level of complexity.
Seems like Google translate has failed you mate. Cheers!
@@avalanche2073 idgf
Skip