Learn Flutter Hooks and Maximize Your Code Reuse

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

[@martinalcala4823]

As a React developer, this was sooo beautiful!

[@lakratihamza]

Amazing 👏 Love that so much, very similar to react hooks which I am a very huge fan of 😍😍

[@marcoscarlomagno3065]

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

[@rcjuancarlosuwu]

Good job! It was really clear to understand. thanks!

[@wongvoonngee3307]

Heard the Hook before, but never know how use it until now. 😀 Great tutorial, and keep it up 😍

[@RobertBrunhage]

Happy to help!

[@youtornado]

My first action: Installing the Remove Comments Extension 😂

[@RobertBrunhage]

That is all I wanted!

[@keithbacalso9433]

Wait so it is an extension?!😱

[@sids911]

just found in KZbin recommendations ... I really liked it considering I am new to flutter in general! Thanks. Btw nice explanation not too long or too short

[@RobertBrunhage]

Awesome, glad you liked the content!

[@adrisongomez6482]

Sound Great. I love it.

[@rikiyanuar547]

great tutorial 👍

[@DoctorCode9]

I never heard about Flutter Hooks before this video, Thanks man ❤

[@balajijangde8470]

me too

[@RobertBrunhage]

Glad I could be of help!

[@catalinstroe22]

Came here after i just learned about react hooks :)

[@morchedlafferty8614]

Good presentation. Keep this up! - I felt like I'm watching Fireship. :)

[@RobertBrunhage]

Thanks, highly appreciated!

[@OICG]

Great Video👍! Good Explanation. Want More Videos like this !

[@RobertBrunhage]

More to come!

[@thkp-eng]

Very cool! Always wondered if hooks could be applied to Flutter given it's conceptual similarity to React!

[@rishabhgupta0.8]

explained very well.

[@dev_casper]

Great explanation.

[@DavidSmith-ef4eh]

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.

[@RobertBrunhage]

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!

[@whyimustusemyrealname3801]

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

[@WonderPlayTR]

I like your content.

[@i.k.shaikh3772]

Excellent Tutorial, Looking forward to an animation video

[@RobertBrunhage]

Have it written down!

[@anggapande8395]

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.

[@adamgonzales8677]

Reactjs developers are loving this feature I'm sure of it

[@veeresh4441]

Can't we use state management (like redux bloc or provider) for this purpose.

[@mohammedsalman3397]

Flutter Hooks are much easier to understand and reason about and also they're just like react hooks so that's a plus

[@sujalabhani980]

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

[@grAPPfruitMacroCraft]

Is it not possible to do the same thing with mixins?

[@beijunxi4697]

aaaaaaamazing

[@jimmyrobert5879]

Amazing video, great job 👍🏽 Just to be sure, the context parameter in your useInfiniteTimer function is useless here, am I wrong?

[@RobertBrunhage]

Oh yeah, that is a miss. The context is not needed! I commited a change on GitHub

[@abmarees]

(8:11) useInfiniteTimer method is having a parameter BuildContext, but is it necessary ? Because it is not used by the method 🤔

[@RobertBrunhage]

It was a mistake and fixed if you check the GitHub repo in the description!

[@hadirahmani7943]

thanks, so what was the result?

[@farhadentezari6206]

Very well explained thanks! I dont get dispose() - what happens if you forget to dispose?

[@unknownunicorn1373]

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

[@abe10]

It's so similar to react hooks :)

[@RobertBrunhage]

It's a Flutter implementation of it!

[@JohnDoe-fv5cu]

The same stuff can be implemented using mixins, without any third party libraries

[@RobertBrunhage]

Yes but there are other drawbacks with that: github.com/flutter/flutter/issues/51752

[@EduardoLima-pi7fl]

Hi John, I'm starting with Flutter and I was curious how this can be implement using mixins, could you share an example? Tnks

[@shlokbhakta2893]

Man woke up and chose violence with the comments

[@mohammadtalha2336]

Just write stl instead of stle and stf for statefullwidget

[@Balqini]

What is the extension that you use in the 1:31 ? I'm new to flutter.

[@jousis_]

Pubspec assist

[@SirJagerYT]

i dont understand why we need to pass context inside useInfiniteTimer(context); Why ?

[@SuperHesni]

Can you please make a video on how to use moor in flutter web , thank u for all the good videos

[@RobertBrunhage]

Great suggestion!

[@marflage]

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!

[@TekExplorer]

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.

[@marflage]

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

[@TekExplorer]

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

[@marflage]

@@TekExplorer I see, thanks

[@soumikpaul7960]

Great learning content! Btw which ide is that?

[@RobertBrunhage]

I am using VSCode!

[@soumikpaul7960]

@@RobertBrunhageHow did you get that background color in vscode? It looks so stunning and beautiful!

[@RobertBrunhage]

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

[@soumikpaul7960]

@@RobertBrunhage Thanks a lot loved your content!

[@jasonsebring3983]

way cleaner, smaller code, good stuff. ... now how to do this with global state, streams etc...

[@f-person]

Why did you need context argument for useInfiniteTimer?

[@RobertBrunhage]

Nope I have updated the code in GitHub! See the link in the description, was a mistake and didn't notice it haha

[@f-person]

Okay. Thanks for the video!

[@syleishere]

He seriously needs to learn getX. He doesn't even need to use stateful widgets anymore, this is so old school

[@tarunverma8693]

Can you help me for How to start freelancing as a flutter developer...

[@RobertBrunhage]

I would if I was someone that had been doing freelancing, sadly I have not :(

[@tarunverma8693]

@@RobertBrunhagebut how flutter developer make passive income.

[@youtornado]

Freelancing is not about passive income - it is more about improving your Flutter skills, applying for projects, and doing actual work...

[@rumble1925]

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

[@nt4f04und]

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

[@maconbacon]

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

[@hawkybae]

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.

[@RobertBrunhage]

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.

[@nt4f04und]

what i think about this whole thing github.com/flutter/flutter/issues/51752#issuecomment-723564582

[@SAMSHELDINTHOMAS]

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

[@ankitrathore3946]

Why are you making flutter looks like react ??

[@waiyanphyo7]

totally agree no longer flutter style -_-

[@hildingj]

first

[@RobertBrunhage]

second

[@blackhatvisions]

Repeating the regular code 7 times is easier than implementing the hook.

[@ShawnBlais]

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.

[@Algardraug]

Not a fan of useEffects. So much extra messy code with anonymous functions within another function. Less readable than separating code into different functions

[@elvincitore1512]

talk about a complete rip off of react hooks

[@MisterDibitybopty]

You say that like it's a bad thing.