Flutter Web and Flutter Hooks

In case it helped :)

Begin…

Website : https://fir-signin-4477d.firebaseapp.com/#/

We will cover briefly about

1. Flutter Hooks..

Note: This article launches my tutorial’s suggestion page, now you can suggest me articles..Selected ones will be notified via email…:)

Article here : https://flatteredwithflutter.com/flutter-web-and-flutter-hooks/

What are Flutter Hooks ?

Before answering this question, let’s first know

Why Flutter Hooks?

As per the documentation,

StatefulWidget suffers from a problem, it is very difficult to reuse the logic of initState or dispose. For instance, AnimationController:

AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
  }

  @override
  void didUpdateWidget(Example oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration) {
      _controller.duration = widget.duration;
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

Widgets that want to use an AnimationController will have to write the above structure over and over…

Introducing Flutter Hooks

Widgets that want to use an AnimationController will have to write the above structure over and over…

Widgets that want to use an AnimationController will have to write the above structure over and over…

Introducing Flutter Hooks

dependencies:  flutter_hooks: ^0.9.0

Instead of extending the child with StatefulWidget, we extend with HookWidget....

class Example extends HookWidget {}

HookWidget (Definition),

A [Widget] that can use [Hook]

It’s usage is very similar to [StatelessWidget]. [HookWidget] do not have any life-cycle and implements only a [build] method.

The difference is that it can use [Hook], which allows [HookWidget] to store mutable data without implementing a [State].

Things to take :

• Implements only build method
• This widget can use hooks

A basic example of HookWidget

class Example extends HookWidget {
  final Duration duration;

  const Example({Key key, @required this.duration})
      : assert(duration != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: duration);
    return Container();
  }
}

Here, as you can see, there is no initialisation for animation controllers.

What are Hooks ?

Hooks are a type of object, having following rules….

• They can only be used in the build method of a HookWidget.

Widget build(BuildContext context) {
  final controller = useAnimationController();
  final controller2 = useAnimationController();
  return Container();
}

Do I need to create my own hook ?

There are predefined hooks inside the flutter_hooks. Some of them are listed below :

• useState : Creates a variable and subscribes to it.
• useContext : Obtains the BuildContext of the building HookWidget.
• useValueChanged : Watches a value and calls a callback whenever the value changed.
• useValueListenable : Subscribes to a ValueListenable and return its value.
• useTextEditingController : Creates a TextEditingController 

---

For others, follow this link.. Note, you can still create your own hook, see here

Here, you can see a form with 5 input fields. Things to note down :

• First 2 fields (name and tutorial name) are mandatory fields
• Rest are optional fields
• Save button will require the mandatory fields to be filled…
• Confirmation dialog is shown if all good, with the form data(you just entered)..

• On Save, the response is sent over and saved…:)

Implementation

• TextController hook (useTextEditingController)

Implementation

• TextController hook (useTextEditingController)

TextController Hook

• Each mandatory field is associated with a ValueListenable Hook (useValueListenable)

final _nameListenable = useValueListenable(_namefield);

• Pressing of button Save is linked with a ValueNotifier Hook (useState)

final _onSavePressed = useState(false);

• Validation of form is done, when the button save is pressed, in which we check, whether the mandatory fields (name field and tutorial name field) are filled….

final _validateFields =
        _nameListenable.text.isNotEmpty && _tutNameListenable.text.isNotEmpty;

• Form data is saved as

Suggestion Model..

The data is passed over via web service….

Things to note :

• We haven’t called setstate or stored any intermediate value somewhere..
• Once the value inside the hook changes, the Hook Widget is notified…
• For getting the current value of mandated fields, we use valueListenable hook…

This hook notifies, whenever the value bound to it, changes…Like the ValueListenableBuilder

Perf Optimisations :

By default, entire HookWidget is notified, if there is a change to the hook, but this can be manipulated with

• HookBuilder

This ensures a smaller portion of the Widget tree is rebuilt when the hook changes..

HookBuilder(
    builder: (context) {
       //YOUR WIDGET       
    },
),

• useEffect Hook

List out selected hooks using useEffect

final _emailfield = useTextEditingController.fromValue(
      TextEditingValue.empty,
    );

useEffect(
    () {
      // YOUR LOGIC
    },
    [_emailfield],
);

• useMemoized Hook 

Caches the instance of a complex object..

final stream = useMemoized(
      () => Stream<int>.periodic(
      const Duration(seconds: 1), (i) => i + 1),
);

Caches the stream, first time the builder function is invoked…

Now, you can suggest me next article, using this form :p…

Also kindly suggest the tips (in the comments), which you may have encountered with flutter hooks…

In case it helped :)

Hosted URL : https://fir-signin-4477d.firebaseapp.com/#/

Source code for Flutter Web App..