Write Less Code with Flutter Hooks | Learn Flutter Fast

stateful widgets are great and all but they come with a lot of boilerplate code when dealing with controllers like text editing controllers animation controllers scroll controllers and more to Showcase this let's build a basic form in flutter using a stateful widget we want our text form field to have an initial value so that means we need to remember the first instantiate a text editing controller and then dispose of the controller to avoid memory leaks to check if the form is valid you have to instantiate a global key for the form and assign it as the form key then we're able to validate the form by accessing the formkey's current state and calling validate let's toss in a state variable called content and display it above our text form field making sure it changes whenever the text form fields on changed fires this doesn't look too bad but remember we only have one text editing controller imagine this form had 3 5 or even 10 Fields we'd have to remember to instantiate and dispose of each controller individually however thanks to the flutter hooks package we can reduce the spoilerplate down to one line let's make a new widget called hooks form that extends a hook widget first we create our form key using use memoized a hook that caches the instance of our key for future use next we make our text controller using use text editing controller it handles the instantiation and disposal of the text setting controller automatically which means we have to worry about one less thing while building our awesome apps finally We'll add a use statehook to store our content string let's paste our previous code from the old form and fix the names of our variables accordingly and now our form has less code and is working perfectly so now you're probably thinking that this is cool and all but you want to run code as soon as the widget is inserted into the widget tree like how an its state does luckily there's a hook for that in the build method we can add use effect and add an effect callback this callback is called synchronously on every build which means if we don't add any Keys it will always fire when the widget rebuilds if we want to act like an in-state then specify an empty list for the keys and if we want the Callback to fire only one specific value change then we can add them to the list this can be super useful in cases where you're dealing with subscribing to and canceling a subscription to a stream there's a lot of reusable hooks that are included in the flutter hooks package and you can find out more info on the package page you can even write your own hooks for custom functionality and easy code reuse throughout your projects and I'm going to wrap this video up here if you enjoyed the video don't forget to leave a like And subscribe thanks for watching and I'll see you in the next one

Channel: Marcus Ng

Views: 10,638

Keywords: flutter tutorial for beginners, flutter hooks, flutter hooks tutorial, flutter state management, flutter lifecycle methods, flutter custom hooks, flutter code reusability, flutter code sharing, flutter lifecycle, flutter hooks example, flutter tutorial, learn flutter, flutter packages, react hooks for flutter, react hooks in flutter, how to learn flutter fast, flutter tutorial 2022, flutter done fast, flutter tips, flutter tips and tricks, flutter hooks useeffect

Id: 98AtZweX4-g

Length: 2min 40sec (160 seconds)

Published: Fri Nov 04 2022