Тёмный

Flutter Hooks - Say Goodbye To Stateful Widget 

Avalanche
Подписаться 1,3 тыс.
Просмотров 57 тыс.
50% 1

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

Опубликовано:

 

13 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 119   
@alexeycherkashin6251
@alexeycherkashin6251 2 года назад
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 года назад
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 года назад
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 года назад
@@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 года назад
Great fireship vibes, clean and simple 👍
@avalanche2073
@avalanche2073 2 года назад
Thanks mate. Just doing what I know until I discover my own style.
@guestofallah7661
@guestofallah7661 2 года назад
@@avalanche2073 u r doing great ,keep it up
@dennisbarzanoff9025
@dennisbarzanoff9025 2 года назад
Right! I noticed that too! Love to see that
@trevor6846
@trevor6846 2 года назад
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 года назад
I'm glad you like it. New video is coming in a week!
@xerotolerant
@xerotolerant 2 года назад
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 года назад
+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 года назад
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.
@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 года назад
Great introduction and overview to Flutter Hooks. Thanks!
@avalanche2073
@avalanche2073 2 года назад
You are welcome good sir!
@lijack446
@lijack446 2 года назад
I like the stateful api (the flutter way) and I can dive into it by reading the flutter source code.
@ZackMitkin
@ZackMitkin 2 года назад
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.
@theLaughRiot00
@theLaughRiot00 2 года назад
That's nice, from React native background it helps a lot to me. Nice video. Thanks 🙏
@adusparx
@adusparx 2 года назад
* Coughs in React *
@swostikgautam5836
@swostikgautam5836 2 года назад
Ok found another amazing account... Looking forward to your next video.
@avalanche2073
@avalanche2073 2 года назад
New video is in the making!
@avalanche2073
@avalanche2073 2 года назад
Liked what you saw? Check out my other video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-K3j06y_k4zM.html
@prathameshsundaram7509
@prathameshsundaram7509 2 года назад
This is a great intro! Thanks for the video! Can't wait for more.
@detaaditya6237
@detaaditya6237 2 года назад
My mind is blown away over useTextEditingController. It significantly reduces the code!
@Nackenschelle
@Nackenschelle 2 года назад
high quality video, thanxx
@TheCaptSmile
@TheCaptSmile 2 года назад
Cool motivated and understandable video presentation. Thx a lot!
@binarnesia
@binarnesia Год назад
now it's time to refactor the code of my project
@avalanche2073
@avalanche2073 Год назад
Happy times
@altafxx
@altafxx 2 года назад
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.
@mishalhaneef3723
@mishalhaneef3723 2 года назад
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
@priyangpatel8135
@priyangpatel8135 2 года назад
After watching this I (react dev) feel like I can give it a spin to flutter
@dennisbarzanoff9025
@dennisbarzanoff9025 2 года назад
Bro im subscribing just because of this video
@avalanche2073
@avalanche2073 2 года назад
I'm glad you're making good life choices sir!
@o.sunsfamily
@o.sunsfamily Год назад
Firstly, thank you for the video! Secondly, which VSC extension / setting is responsible for this visible scaffolding: | | - It is rather aesthetically pleasing.
@chandansharma8658
@chandansharma8658 2 года назад
Great video amigo. Keep up the good work
@39strife
@39strife 2 года назад
hey alright
@rriicckkyyss
@rriicckkyyss 2 года назад
Great explanation, awesome video!
@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!
@prudhvirajchowhan
@prudhvirajchowhan 2 года назад
what is extension you used to highlight nesting of your code ?? For instance at 4:20 of the video
@avalanche2073
@avalanche2073 2 года назад
It comes with Flutter extension. You can activate it in your settings, just look for Dart: Preview Flutter Ui Guides
@RivaanRanawat
@RivaanRanawat 2 года назад
Amazing video 🤩
@logandemir1635
@logandemir1635 2 года назад
I truly hate hooks from the bottom of my heart and soul. What a disgrace.
@avalanche2073
@avalanche2073 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 года назад
@@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!
@tananga1523
@tananga1523 2 года назад
Great video
@avalanche2073
@avalanche2073 2 года назад
Thanks!
@rsocial453
@rsocial453 2 года назад
Thank you so much
@avalanche2073
@avalanche2073 2 года назад
You are welcome!
@luisrogelio98
@luisrogelio98 2 года назад
It's like React for Flutter! , great I hate it.
@noureddineettouzany843
@noureddineettouzany843 2 года назад
@loyedev513
@loyedev513 2 года назад
Hi. What extension view tree in code???
@babyboie20
@babyboie20 2 года назад
Super dope!
@lugardjulien5326
@lugardjulien5326 2 года назад
perfect video dude just perfect
@rajesearisonmoise
@rajesearisonmoise 2 года назад
Thank you so much I love it !!!
@zhangkevin8147
@zhangkevin8147 2 года назад
Nice share.Thanks!
@Tokieejke
@Tokieejke 2 года назад
Instant subscribe, awesome content!
@ck-the-terrible
@ck-the-terrible 2 года назад
aw sweet! flutteract.
@realfootball338
@realfootball338 2 года назад
Good, same as React.
@ekopurnomo9221
@ekopurnomo9221 2 года назад
Very nice
@dev_jeongdaeri
@dev_jeongdaeri 2 года назад
So cooool! 😎
@sahil1307
@sahil1307 Год назад
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
@mishalhaneef3723
@mishalhaneef3723 2 года назад
Neet! Thanks for this
@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
@deepL0
@deepL0 2 года назад
What a video and tutorial
@alexamancio6761
@alexamancio6761 2 года назад
Great work.
@avalanche2073
@avalanche2073 2 года назад
Thank you very much, kind sir!
@3king78
@3king78 2 года назад
GetX go!🥰
@mohamedmahadfarah4057
@mohamedmahadfarah4057 2 года назад
Great !
@klutch4198
@klutch4198 2 года назад
Outstanding!
@iabhishekpatil4415
@iabhishekpatil4415 2 года назад
Last enjoyable fish got like
@aboasd685
@aboasd685 11 месяцев назад
You are so fast just like a bullet
@aguyoninternet9883
@aguyoninternet9883 2 года назад
Why do you sound like the old fireship? :)
@avalanche2073
@avalanche2073 2 года назад
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
@RaviGupta-om3vx
@RaviGupta-om3vx 2 года назад
Hey how did the path in terminal get too short
@avalanche2073
@avalanche2073 2 года назад
PROMPT_DIRTRIM=1
@ronaldoSf
@ronaldoSf 2 года назад
Omg noo. I hate people trying to reinvent the well. Flutter is fine.
@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.
@MsVsmaster
@MsVsmaster 2 года назад
If flutter is following this direction, we can expect JSX renders on the future.
@avalanche2073
@avalanche2073 2 года назад
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 года назад
​@@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
@xyunsx 2 года назад
this is now react 🙆‍♂️🙆‍♂️🙆‍♂️
@mahasiswamurni
@mahasiswamurni 2 года назад
is it jokes video?
@khuongduong9249
@khuongduong9249 2 года назад
Flutter hooks bring all concept react into flutter.
@medsed1133
@medsed1133 2 года назад
Which is messed up
@ykorshev
@ykorshev 2 года назад
Another stupid bicycle to add another level of complexity.
@avalanche2073
@avalanche2073 2 года назад
Seems like Google translate has failed you mate. Cheers!
@ykorshev
@ykorshev 2 года назад
@@avalanche2073 idgf
@nanonkay5669
@nanonkay5669 2 года назад
People will do anything but use React Native 🤦🏾‍♂️
@neoprint3d
@neoprint3d 2 года назад
Everything is becoming react lol
@theguy4084
@theguy4084 2 года назад
Getx is another way not to use statefull widget
@KangJangkrik
@KangJangkrik 2 года назад
Lol flutter is becoming react
@ShalehTonmoy
@ShalehTonmoy 2 года назад
0:37 triggered 😢
@avalanche2073
@avalanche2073 2 года назад
😢
@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!
@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 года назад
Incredibly useless
@justintie
@justintie 2 года назад
flutter is getting reactified, just goes to show how awesome react is
@radomane
@radomane 2 года назад
This is cursed and I hate it.
@mykhailokeryta120
@mykhailokeryta120 2 года назад
Skip
Далее
Flutter State Management - Explained
14:30
Просмотров 3,4 тыс.
Why Are People Leaving Canada? 🇨🇦
15:20
Просмотров 1 млн
35 Flutter Tips That Will Change Your Life
10:53
Просмотров 299 тыс.
Avoid using StatefullWidget!
3:50
Просмотров 8 тыс.
State Management Like A Pro - Flutter Riverpod
10:30
Просмотров 76 тыс.
Freezed (Package of the Week)
2:57
Просмотров 182 тыс.
Top 30 Flutter Tips and Tricks
6:50
Просмотров 547 тыс.
The Story of Next.js
12:13
Просмотров 562 тыс.