Flutter Web and Flutter Hooks
Tags: productivity, flutter, webdev, dart
Published: 2020-06-20 16:52:18

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:heading {"level":3} -->
<h3>Begin…</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong><em>Website&nbsp;: </em></strong><a href="https://fir-signin-4477d.firebaseapp.com/#/" rel="noreferrer noopener" target="_blank"><strong><em>https://fir-signin-4477d.firebaseapp.com/#/</em></strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will cover briefly about</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><strong>Flutter Hooks..</strong></li></ol>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong><em>Note: This article launches my tutorial’s suggestion page, now you can suggest me articles..Selected ones will be notified via email…:)</em></strong></p></blockquote>
<!-- /wp:quote -->

{% youtube L9i7OMbCm3c %}

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

<!-- wp:heading {"level":4} -->
<h4>What are Flutter Hooks ?</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before answering this question, let’s first know</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Why Flutter Hooks?</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>As per the documentation,</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>StatefulWidget</code> suffers from a problem, it is very difficult to reuse the logic of <code>initState</code> or <code>dispose</code>. For instance, <code>AnimationController</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>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();
  }</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Widgets that want to use an <code>AnimationController</code> will have to write the above structure over and over…</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Introducing Flutter Hooks</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Widgets that want to use an <code>AnimationController</code> will have to write the above structure over and over…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Widgets that want to use an <code>AnimationController</code> will have to write the above structure over and over…</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Introducing Flutter Hooks</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:code -->
<pre class="wp-block-code"><code>dependencies:  flutter_hooks: ^0.9.0</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Instead of extending the child with StatefulWidget, we extend with <code><strong>HookWidget....</strong></code></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>class Example extends HookWidget {}</code></pre>
<!-- /wp:code -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>HookWidget (Definition),</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>A [Widget] that can use [Hook]</p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>It’s usage is very similar to [StatelessWidget]. [HookWidget] do not have any life-cycle and implements only a [build] method.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>The difference is that it can use [Hook], which allows [HookWidget] to store mutable data without implementing a [State].</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Things to take&nbsp;:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Implements only build method</li><li>This widget can use hooks</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>A basic example of HookWidget</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>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();
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Here, as you can see, there is no initialisation for animation controllers.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>What are Hooks&nbsp;?</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Hooks are a type of object, having following rules….</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>They can only be used in the <code>build</code> method of a <code>HookWidget</code>.</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>Widget build(BuildContext context) {
  final controller = useAnimationController();
  final controller2 = useAnimationController();
  return Container();
}</code></pre>
<!-- /wp:code -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Do I need to create my own hook&nbsp;?</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>There are predefined hooks inside the <a href="https://pub.dev/packages/flutter_hooks#-readme-tab-" rel="noreferrer noopener" target="_blank"><strong>flutter_hooks</strong></a>. Some of them are listed below&nbsp;:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://pub.dartlang.org/documentation/flutter_hooks/latest/flutter_hooks/useState.html" rel="noreferrer noopener" target="_blank">useState</a>&nbsp;: Creates a variable and subscribes to it.</li><li><a href="https://pub.dartlang.org/documentation/flutter_hooks/latest/flutter_hooks/useContext.html" rel="noreferrer noopener" target="_blank">useContext</a>&nbsp;: Obtains the <code>BuildContext</code> of the building <code>HookWidget</code>.</li><li><a href="https://pub.dartlang.org/documentation/flutter_hooks/latest/flutter_hooks/useValueChanged.html" rel="noreferrer noopener" target="_blank">useValueChanged</a>&nbsp;: Watches a value and calls a callback whenever the value changed.</li><li><a href="https://pub.dartlang.org/documentation/flutter_hooks/latest/flutter_hooks/useValueListenable.html" rel="noreferrer noopener" target="_blank">useValueListenable</a>&nbsp;: Subscribes to a <code>ValueListenable</code> and return its value.</li><li><a href="https://pub.dartlang.org/documentation/flutter_hooks/latest/flutter_hooks/useTextEditingController.html" rel="noreferrer noopener" target="_blank">useTextEditingController</a>&nbsp;: Creates a <code>TextEditingController</code>&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>For others, follow this <a href="https://pub.dev/packages/flutter_hooks#existing-hooks" rel="noreferrer noopener" target="_blank"><strong>link</strong></a><strong>.. </strong>Note, you can still create your own hook, see <a href="https://pub.dev/packages/flutter_hooks#how-to-use" rel="noreferrer noopener" target="_blank"><strong>here</strong></a></p></blockquote>
<!-- /wp:quote -->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7og6qygb6bl98mte9vt6.png)

<!-- wp:paragraph -->
<p>Here, you can see a form with 5 input fields. Things to note down&nbsp;:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>First 2 fields (<strong>name and tutorial name</strong>) are mandatory fields</li><li>Rest are optional fields</li><li>Save button will require the mandatory fields to be filled…</li><li>Confirmation dialog is shown if all good, with the form data(you just entered)..</li></ul>
<!-- /wp:list -->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j3xhaufjwtys1293f2z4.png)

<!-- wp:list -->
<ul><li>On Save, the response is sent over and saved…:)</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Implementation</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:list -->
<ul><li>TextController hook (<strong>useTextEditingController</strong>)</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Implementation</strong></p></blockquote>
<!-- /wp:quote -->



<!-- wp:list -->
<ul><li>TextController hook (<strong>useTextEditingController</strong>)</li></ul>
<!-- /wp:list -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*b_6Z6KaqcVZ0RSnWHswjcA.png" alt="TextController Hook"/><figcaption>TextController Hook</figcaption></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Each mandatory field is associated with a ValueListenable Hook (<strong>useValueListenable</strong>)</li></ul>
<!-- /wp:list -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">final _nameListenable = useValueListenable(_namefield);</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>Pressing of button Save is linked with a ValueNotifier Hook (<strong>useState</strong>)</li></ul>
<!-- /wp:list -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">final _onSavePressed = useState(false);</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>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….</li></ul>
<!-- /wp:list -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">final _validateFields =<br>        _nameListenable.text.isNotEmpty &amp;&amp; _tutNameListenable.text.isNotEmpty;</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>Form data is saved as</li></ul>
<!-- /wp:list -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*UV4HxfvB2CGc0yMSlaKIcQ.png" alt="Suggestion Model.."/><figcaption>Suggestion Model..</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The data is passed over via web service….</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Things to note&nbsp;:</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:list -->
<ul><li>We haven’t called <strong>setstate</strong> or stored any intermediate value somewhere..</li><li>Once the value inside the hook changes, the Hook Widget is notified…</li><li>For getting the current value of mandated fields, we use valueListenable hook…</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>This hook notifies, whenever the value bound to it, changes…Like the <a href="https://api.flutter.dev/flutter/widgets/ValueListenableBuilder-class.html" rel="noreferrer noopener" target="_blank">ValueListenableBuilder</a></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Perf Optimisations&nbsp;:</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>By default, entire HookWidget is notified, if there is a change to the hook, but this can be manipulated with</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>HookBuilder</strong></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>This ensures a smaller portion of the Widget tree is rebuilt when the hook changes..</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">HookBuilder(<br>    builder: (context) {<br>       //YOUR WIDGET       <br>    },<br>),</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li><strong>useEffect Hook</strong></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>List out selected hooks using useEffect</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">final _emailfield = useTextEditingController.fromValue(
      TextEditingValue.empty,
    );

useEffect(
    () {
      // YOUR LOGIC
    },
    [_emailfield],
);</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li><strong>useMemoized Hook&nbsp;</strong></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Caches the instance of a complex object..</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">final stream = useMemoized(<br>      () =&gt; Stream&lt;int&gt;.periodic(<br>      const Duration(seconds: 1), (i) =&gt; i + 1),<br>);</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Caches the stream, first time the builder function is invoked…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, you can suggest me next article, using this form&nbsp;:p…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also kindly suggest the tips (in the comments), which you may have encountered with flutter hooks…</p>
<!-- /wp:paragraph -->

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Hosted URL&nbsp;: <a href="https://fir-signin-4477d.firebaseapp.com/#/" rel="noreferrer noopener" target="_blank">https://fir-signin-4477d.firebaseapp.com/#/</a></p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><a href="https://github.com/AseemWangoo/experiments_with_web" rel="noreferrer noopener" target="_blank">Source code for Flutter Web App..</a></p></blockquote>
<!-- /wp:quote -->

{% youtube L9i7OMbCm3c %}