Learn Flutter Hooks and Maximize Your Code Reuse

you have probably seen widget lifecycle methods before it could be things like init state and dispose they are a great tool but also has some drawbacks a fundamental problem with widget lifecycle methods is that they bind the implementation to the specific widgets a example could be a normal animation controller where you first set it up in init state and then dispose it in the dispose method and depending on how it's implemented you may also have to add a did update widget now this is not a problem in itself the problem occurs when we want to do the same in another widget and this is where hooks come into place in this case flutter hooks already have a implementation for animation controller which you can simply use by calling use animation controller but now what happened to all of that logic well it actually moved into the method of use animation controller and the thing we are going to implement is a very simple timer so when this timer is created we are going to tick every second and display that second in the widget first we are going to start with the normal implementation of widget's life cycles then getting your hands dirty with things like hook widget use effect and use state and then to finish it off we're going to create our own custom hook if you like these videos make sure to check out the website subscribe to the channel like the video and let's dive in the first thing we're going to do is head to the pub spec yaml file i'm going to go ahead and remove all of the comments here so it's easier to read now we're going to add a new dependency and a dependency is going to be flutter hooks after we have gotten the dependency we're going to move over to the main.dart file i'm going to write the majority of the code in here so it's easier to follow we start off by removing all of the comments and changing our homepage so the only thing it actually returns is the app bar and a center widget with a text so now we have a super simple stateful widget which just have a variable for the number that we display in the center now if you want to implement a timer normally you would first have to create a variable for the timer after that is complete you override the init state method now the reason for this is because we initialize the timer in the init state so we're going to set the timer as a new timer but before that we're just going to set all of the variables to private variables instead now the timer class actually has a constructor for periodic which will give us a callback every time the duration has passed in our case we are given the duration of seconds 1 which means that we will get a callback every second now inside this callback we can simply do a set state where we set the number which is now equals to zero but we set it equals to the timer tick value now one thing you always have to remember when working with a timer in this case is that on dispose of this widget you have to cancel the actual timer so by overriding this pose we can reference our timer and call the cancel method and this is one way you can implement a timer that would tick every second in the widget of a text the problem with this approach now is that if you want to create another widget with this usage you would have to override the init state and dispose and do all of the implementations again now we're going to take a look on how we can do the same thing but instead using a hook widget so we're going to use the normal snippet for a stateless widget because that's easier and then instead of extending the stateless widget we extend the hook we get coming from the library now as the ui is going to be the same in all of these three i'm just going to copy the ui and return that in the bottom of the build function now hook widget doesn't have in state and dispose they actually use hooks instead so we will not be able to use for example set state here either so the way you work with these things in this case we're going to use a use state hook and when this variable changes it will actually call the build method and rebuild the widget meaning that the state will update now one thing you have to be aware of is that this is a value notifier so you would have to call value on it now for the init state and dispose we're going to use the use effect hook this actually has multiple functions so first off if we want it to only happen once we define a empty list of keys if we would pass anything to this list and that would change then the callback of use effect would be called once again but as we only want it to happen once we will not pass anything now inside here you can work as you're using a init state so in this case we're going to initialize a timer and this will be used as before we're going to use timer.periodic have a duration of one second for each tick and then create the callback for whenever that tick happens now if you remember we do not actually use set state anymore just use this value notifier and set a value to the time.tick now to dispose of this you actually used to return the timer cancel method and here you have a lot of functionality used in one single hook there is also great documentation so you can also read it up on that if you want to now for actually creating our custom hook we're going to first off of course create a new hook widget this is going to be very similar to the other ones just make sure that you extend the hook widget for the return statement we used of course copy the last one that we used just paste it into the new one now the way we actually go about creating a custom hook is actually very simple now for the logic of this hook we're going to create a new file the hook will be responsible for initializing the timer disposing it and then of course returning that number value now a easy way to create a hook is to start off by creating a stateful widget we're going to make it private because we don't actually want to use the actual class we give it the name infinite timer and then of course instead of extending the stateful widget we're just going to extend hook now it gives us some errors because we have to define some more things the hook type is going to be a integer now the reason for create status red is because we extend state instead of hook state and that actually also requires integer and then of course the infinite timer type now the build method doesn't actually return a widget anymore we have specifically told it that we want it to return a integer and this of course is going to be the number that is going to be incremented every second for the time being we're just going to have a empty return now what we're going to start off with is defining our timer variable and the integer number that we're going to have the implementation of this is very similar to the stateful widget and you will soon see how so we start off by overriding init hook which is pretty much the same as init state but for this hook instead here we can have the same logic as before so we initialize the timer variable by setting it to timer.periodic setting the duration to one second again and then defining our callback now every time this callback happens we call set state and here of course we set the number to the actual timer tick again now of course also remember that timer has to be disposed of so we override the dispose method and then calling cancel on that timer now two more things we have to do the first one being in the return statement we actually have to return that number variable and the other thing is actually defining our use timer method so we're going to go to the top of the file and define a new method the return type is going to be the number so integer and we prefix all our hooks with use so in this case it's going to be called use infinite timer and we're going to pass the context to this here we can start by returning a use method which is responsible for registering a hook now inside this use method we actually just define our infinite timer we'll make it constant so define constant then underscore infinite timer because we made this private and now of course just create the constant constructor for the infinite timer hook now what we actually have done now is extracting all of the logic that we have for our timer into our custom hook now if we move over to our main.dart file head to our latest hook widget we can define a variable inside the build method the same way we use other hooks now we actually have access to our use infinite timer which gives us this number variable now this is the actual end result for that widget you can see that it is a lot easier to read now the real value comes when we actually reuse the hooks so in normal use cases that you want to have the same functionality in another widget so used to show that we're just going to create another widget called home page custom hook 2 which is going to be a hook widget and if we want this video to also use a timer we just have to define that use infinite timer and we don't have to care about initializing the timer disposing a timer and so on now when you have knowledge of this you know all of the fundamentals for using hooks in your app if you like these videos make sure to like the video if you liked it dislike it if you disliked it sign up on the newsletter on the site for more future content and of course if you'd like to support me on patreon i have a bunch of different perks so a special thanks for everyone that's supporting me there other than that i will see you in the next one [Music] you

Channel: Robert Brunhage

Views: 59,984

Keywords: Flutter, Flutter hooks, Flutter hooks example, flutter hooks tutorial, flutter lifecycle, flutter cifecycle methods, flutter code sharing, Flutter code reuse, flutter tutorial for beginners, flutter code reusability, flutter custom hooks, react hooks in flutter, React Hooks for Flutter, Flutter state management, app development, flutter tips, flutter packages, developer tips, vscode, ios, android, productivity, flutter animations, flutter timer, flutter vscode, Robert Brunhage

Id: A1DUBgIsCv8

Length: 10min 36sec (636 seconds)

Published: Sat Nov 07 2020