Flutter Hooks — The complete crash course

Welcome to a kind of new series on my channel. It’s all about where I explain great and quite complex packages as short and easy as possible. I’ve already done this with Freezed and Isar Database, but now it’s time to convert this into a real series. So let’s get started today with Flutter Hooks!

What is Flutter Hooks?

Flutter Hooks improves the way you use StatefulWidget. it hast some mayor drawbacks when using controllers. For example, if you want to use an AnimationController, you have to create a variable, call initState, didUpdateWidget and dispose. That’s way to much code just for one controller. And now imagine doing this for multiple controllers. In addition, you have to use a mixin that be used once per class. Now, with Flutter Hooks, you just have to create a variable and call a function, where all the logic is stored. To describe it best, let’s see a comparision:

Without Flutter Hooks

With Flutter Hooks

I think we can all agree, that the right code is way cleaner, even if it has the exact same functionality. The logic has been moved to useAnimationController. Functions like these are called a Hook. In this example, useAnimationController is a hook, that is build right into Flutter Hooks. You can see a list of already existing Hooks here.

Because Hooks are such a new thing in Flutter, they also have some specialities. For example, they can only be used in the build method, where the Widget has a mix-in of Hooks. Another great thing of Hooks is, that it you can define multiple types of the same Hook in one build:

The last thing I want to mention before we head over to “Principles” is, that Hooks are fully independent of each other and from the widget. They can even be extracted into a package and published on pub.

Principle

To understand, how Hooks are implemented, it’s best to look at the documentation, because I couldn’t explain it better in any way:

Similar to State, hooks are stored in the Element of a Widget. However, instead of having one State, the Element stores a List<Hook>. Then in order to use a Hook, one must call Hook.use.

The hook returned by use is based on the number of times it has been called. The first call returns the first hook; the second call returns the second hook, the third call returns the third hook and so on.

If this idea is still unclear, a native implementation of hooks could look as follows: […]

Source: https://pub.dev/packages/flutter_hooks#principle

I think we can agree that the creator of this package has done a great job there explaining how it works. He even putted a link to a great medium article, how hooks were done in React.

Rules

Now let’s talk about how you use Flutter Hooks the best way. When following these, others will be able to understand your code better and you will always know, what you’ve done there. So let’s get right into it.

1. Prefix every hook with use

2. Call hooks unconditionally

3. Do not wrap hooks in a condition

When following these rules, you are always on the safe side ^^

Using hot reaload

HookWidget overrides the default hot-reload behavior to work with hooks. That’s why hot-reloads won’t break the application, even if hooks are obtained from their index. But as always, there are a few things to consider:

Create custom hooks

As already said, there are many existing hooks, but what if you want to create your own hook? Well, there are two ways of doing so:

1. Use a function

This is the most common way to write hooks. You can even combine multiple hooks into one more complex hook. This can be done due to the nature of hooks, because hooks are composable. Let’s define a hook that creates a variable and prints the value to the console everytime the value changes:

2. Use a class

You normally use classes when the hook gets too complex. Here we can define another rule or good practice. Try to hide the class under a function such as:

This hook now prints the total time a State has been alive on its dispose:

Conclusion and Further reading

In this article you have learned the basics of the package Flutter Hooks. You have seen how easy it is to use and how much time and unnecessary code it saves you.

Two other great packages are Freezed and Isar. Freezed is used to create data classes way easier. You can read more about it here. Isar is one of the best Local database solutions. It even works for web and is very easy to use if you follow this tutorial.

In the next few articles I will introduce more somewhat complicated packages and explain them. If you don’t want to miss this, I recommend you to follow me.

I tried my best to write the easiest tutorial which everyone understands. If you appreciate this work, I would be very grateful if you could support this quality content and give me some claps!

Thanks for reading, I wish you a great day and happy coding!