Learn Flutter Hooks and Maximize Your Code Reuse
Vložit
- čas přidán 9. 07. 2024
- Flutter Hooks is a package that lets you separate the life-cycle logic from widgets to its own classes and methods. It's very powerful and now we will learn how to utilize it!
Course to build a production-ready app 👉 robertbrunhage.com/course
00:00 Overview
01:41 StatefulWidget
03:26 HookWidget with useEffect
05:22 Create custom hook
Source code: github.com/RobertBrunhage/flu...
····················································································
♥ Become a Patreon supporter: / robertbrunhage
♥ Subscribe: bit.ly/2SUyRhx
····················································································
● Website: robertbrunhage.com
● Twitter: / robertbrunhage
● Discord: / discord
● Instagram: / robertbrunhagedev
● Facebook: bit.ly/RobertDev
As a React developer, this was sooo beautiful!
Amazing 👏 Love that so much, very similar to react hooks which I am a very huge fan of 😍😍
Sound Great. I love it.
Good job! It was really clear to understand. thanks!
My first action: Installing the Remove Comments Extension 😂
That is all I wanted!
Wait so it is an extension?!😱
great tutorial 👍
I never heard about Flutter Hooks before this video, Thanks man ❤
me too
Glad I could be of help!
Came here after i just learned about react hooks :)
Heard the Hook before, but never know how use it until now. 😀 Great tutorial, and keep it up 😍
Happy to help!
So nice content :) I think one important principle is that everything in flutter is a widget, so in this case I would create a widget for the timer and reutilize/customize it across the app instead of reutilizing the functionality. But anyway is so great to count with that library for some special scenario
just found in CZcams recommendations ... I really liked it considering I am new to flutter in general! Thanks. Btw nice explanation not too long or too short
Awesome, glad you liked the content!
Great explanation.
Great Video👍!
Good Explanation.
Want More Videos like this !
More to come!
explained very well.
Good presentation. Keep this up! - I felt like I'm watching Fireship. :)
Thanks, highly appreciated!
Very cool! Always wondered if hooks could be applied to Flutter given it's conceptual similarity to React!
Great stuff, almost exactly like in React. The only problem I have with it, I rarely share code between widgets. But I'll keep that library in mind for future scenarios.
Thank you
I really like it as it has predefined hooks for things like state, animation etc which makes it a lot easier to implement in general!
yeah same here even though I appreciate it that remi push this into main repo, until this moment I never think that I need hook in flutter, in react though I really loves hook and always use hook whenever I can
I like your content.
Flutter Hooks are much easier to understand and reason about and also they're just like react hooks so that's a plus
hay, can you give a tutorial to create customize cluster in map. i already try with plugin but it not bocome what i want and the clustering is not smooth.
Excellent Tutorial, Looking forward to an animation video
Have it written down!
Thanks for the great actual use case tutorial, but i have a question what is if i wanna know the value outside the build method? what if i wanna pass to x function without listening to? maybe i will take look at hooks package
Reactjs developers are loving this feature I'm sure of it
Is it not possible to do the same thing with mixins?
Can't we use state management (like redux bloc or provider) for this purpose.
Amazing video, great job 👍🏽 Just to be sure, the context parameter in your useInfiniteTimer function is useless here, am I wrong?
Oh yeah, that is a miss. The context is not needed!
I commited a change on GitHub
Very well explained thanks! I dont get dispose() - what happens if you forget to dispose?
You'll end up w/ a memory leak and/or unnecessary cpu usage if you create a lot of timers and leave them running in the background
thanks, so what was the result?
aaaaaaamazing
(8:11) useInfiniteTimer method is having a parameter BuildContext, but is it necessary ? Because it is not used by the method 🤔
It was a mistake and fixed if you check the GitHub repo in the description!
The same stuff can be implemented using mixins, without any third party libraries
Yes but there are other drawbacks with that: github.com/flutter/flutter/issues/51752
Hi John, I'm starting with Flutter and I was curious how this can be implement using mixins, could you share an example? Tnks
i dont understand why we need to pass context inside useInfiniteTimer(context); Why ?
I am new to state management. Could anybody explain the difference between hooks, getx, provider, and riverpod? Or are they used for the same thing but with different implementations? Thanks!
hooks isn't really a state management solution - its a way to separate reusable _logic_ from your widgets
the others _are_ state management libraries, however, note that getx is a highly controversial package as it does things in a way many people dislike, plus i think there was some drama about it at some point.
riverpod is said to be a rewrite of provider.
@@TekExplorer thanks for the reply. But isn't state management accomplished through separation of concerns?
Yeah, I have heard about the whole drama about getx's author claiming his package was the best.
@@marflage I don't think that's technically necessary for a state management solution to be a state manager.
Regular ol statefulwidget is a state management solution, after all (though not a good one for anything outside the widget on its own)
@@TekExplorer I see, thanks
It's so similar to react hooks :)
It's a Flutter implementation of it!
What is the extension that you use in the 1:31 ? I'm new to flutter.
Pubspec assist
Man woke up and chose violence with the comments
Why did you need context argument for useInfiniteTimer?
Nope I have updated the code in GitHub! See the link in the description, was a mistake and didn't notice it haha
Okay. Thanks for the video!
Great learning content! Btw which ide is that?
I am using VSCode!
@@RobertBrunhageHow did you get that background color in vscode? It looks so stunning and beautiful!
@@soumikpaul7960 hmm maybe it's my theme, I don't really know haha.
I am using One Dark Pro. Give it a go and see if it's what you are after!
@@RobertBrunhage Thanks a lot loved your content!
Can you please make a video on how to use moor in flutter web , thank u for all the good videos
Great suggestion!
He seriously needs to learn getX. He doesn't even need to use stateful widgets anymore, this is so old school
Just write stl instead of stle and stf for statefullwidget
way cleaner, smaller code, good stuff. ... now how to do this with global state, streams etc...
Can you help me for How to start freelancing as a flutter developer...
I would if I was someone that had been doing freelancing, sadly I have not :(
@@RobertBrunhagebut how flutter developer make passive income.
Freelancing is not about passive income - it is more about improving your Flutter skills, applying for projects, and doing actual work...
@@tarunverma8693 you get passive income from having people work for you or make a product to sell. Freelancing means selling your own time, which is not passive.
horrible anti-pattern for flutter as per me and the flutter team itself, if you follow up the github.com/flutter/flutter/issues/25280
what the heck do hooks give you you can’t achieve with flutter state management toolings. remember the hooks will definitely have some performance drawback
Same thing I was wondering, so many drawbacks, no clear advantage that could only be accomplished by the use of hooks or at least largely advantegeous
Definitely a good idea not choosing to add hooks to the core Flutter framework. Also making a core architectural change because it 'works' on another framework is absurd.
Nevertheless, it's good having the option to use hooks as a separate package.
I would not say it's a anti-pattern and nothing that the Flutter team has said either (to my knowledge). I recommend this post github.com/flutter/flutter/issues/51752 for more indepth information.
what i think about this whole thing github.com/flutter/flutter/issues/51752#issuecomment-723564582
Why are you making flutter looks like react ??
totally agree no longer flutter style -_-
first
second
Hi Can i use fluttur hook in this project,,,
github.com/samsheldin/checkout
hi there is a json of a shopping cart app
in each object of the list there is a discount start and discount end
so i know know how to make the price change based on the timing for individual products,,,
but logic looks a bit confusing when i am totalling the price and displaying it in ui,,,
for eg 10 + 5(discounted price) + 10 + 5(discounted price) + 5(discounted price)
total price 35
now suppose after 5 min user is still on the screen discount on one of the products end
it looks like this
10 + 10 + 10 + 5(discounted price) + 5(discounted price)
total price 40..
So dislpaying the discount individally is alright,,, but as you can see how can i do the total price based on differnt discount start time and discount end time for each unique product
this is the ui which i am implementing this ,,, so is it possible to use flutter hooks here
Repeating the regular code 7 times is easier than implementing the hook.
Unless you had a bug... then you just copied it 7 times across your app. Or if something has to change, you now have 7 maintenance points.
Not a fan of useEffects. So much extra messy code with anonymous functions within another function. Less readable than separating code into different functions
talk about a complete rip off of react hooks
You say that like it's a bad thing.