Reduce Boilerplate Code with Flutter Hooks!

Flutter Hooks cover design

Flutter is growing rapidly with open source contributions and flutter enthusiasts around the world are going crazy with their contributions.

You should know about a publisher named dash-overflow.net, he has contributed to flutter with some great packages and state management solutions like provider, freezed, river pod, and Flutter Hooks. It could be the next flutter favorite? Who knows? 💭

The idea of Hooks comes from React, and by definition it means:

Hooks are a new kind of object that manage the life-cycle of a Widget. They exist for one reason: increase the code-sharing between widgets by removing duplicates.

Sounds complicated? Let me simplify!

Problem

Imagine a scenario in which you have 10 different stateful widgets, and each of these widgets needs an AnimationController to perform some animation. How would you deal with this? Without using hooks, your answer approach would be something like this:

For every widget, Extend the state class with SingleTickerProviderStateMixin, then define AnimationController, override initState and initialize the animation controller, and finally remember to dispose of the controller on disposing of the state.

AnimationController requires a lot of boilerplate code

Looks like a lot of boilerplate code. How about if I tell you to make another animation controller on the same widget? I’m sure you’ll scream out of frustration 😱

You will have to write the same boilerplate code again. Well, that’s the problem Hooks solves for us!

Solution

Before we solve this example, there are two concepts you need to understand in flutter hooks, Hook & HookWidget.

1. Hook

Hooks are special functions that you can hook into your state widgets, in order to remove boilerplate code and make code readable and reusable. Examples of Hook are:

• useAnimationController(), creates and returns animation controller and disposes of it automatically.
• useTabController(), usePageController(), useScrollController() does the similar.
• useState(), creates a variable and listens to it, and updates it whenever there is a change.

… and much more available.

2. HookWidget

To use these hooks (mentioned above), you have to extend your class HookWidget instead of Stateful or Stateless widgets. Basically, you will be adding different hooks to your main widget, that’s the main idea.

Example 1:

Counter app using useState() hook

In the code snippet above, instead of extending our Counter class with Stateful Widget, we will extend it with HookWidget. Inside the build method, we will attach a hook of useState(0), which means creating an integer variable counter with the initial value of 0. What’s the benefit of doing it with a hook?

Now we don’t have to use setState to trigger a rebuild, as hook does that for us. The next example gives you much clear understanding of the power of hooks!

Example 2:

useAnimationController() — 1

Here is the example of creating an animation controller using a hook useAnimationController(), isn’t that amazing now? Creating another AnimationController will now require just another line of code.

useAnimationController() — 2

You don’t have to scream anymore as all of the boilerplate is just taken care of by our hook! The code became readable, and encapsulated!

There are many more hooks embedded into the package, and you can also create your customized hook if you want, explore more on flutter_hooks.

Thank you for reading, give it a clap if you liked it.

I am open to freelance, full-time, or part-time roles, feel free to reach out at Linkedin, thank you!