こんにちは。趣味グラマのNobu(@nm_aru)です。
毎週ちょっとずつだけ進めているFlutterアプリ開発。
今日は新しく使い始めてみたflutter_hooksネタです。
Flutter hooksはReact hooksのflutter版
Flutter hooksは、例によって@remi_rousseletさんによって開発されたパッケージです。
GitHub - rrousselGit/flutter_hooks: React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase cod...
github.com
Flutter HooksのuseXXXの使い方 - Qiita
はじめにFlutter HooksとはReact HooksのFlutter版です。React Hooksについてはこちらの記事がわかりやすいです。5分でわかるReact Hooks現在、H…
qiita.com
Inside Flutter Hooks - Qiita
概要Flutter Hooksを使う機会があり、すごい便利だなと思っていたのですが、内部的にどんな風に実装されているのか掘り下げてみようかと思い、今回色々調べてみました。(何か間違っていたりし…
qiita.com
@remi_rousseletさんは、riverpodやstate_notifierなど、Flutterでのアプリ開発に欠かせないパッケージを開発している超偉大な御方です。
TextFormFieldのフォーカス管理を行う
TextFormFieldを使っている時に、onFocus的な事をやりたくなる時があります。
そんな時は、TextFormFieldをStateful Widgetで囲って実装するやり方が普通（？）でした。
Attention Required! | Cloudflare
stackoverflow.com
FlutterでTextFieldにフォーカスが当たっているかどうか判定する - Qiita
検索などを実装するときに、キーボードにフォーカスが当たった瞬間別の画面を出すみたいな実装をする場合はがあるかと思います。例えばこんな感じこのときの実装方法について説明します。FocusNode…
qiita.com
これらの記事を参考にStateful Widgetを作っている時に、ふと「あれ？hooks使っているのにStateful Widget使わないと駄目なんだっけ？」と思い、Flutter hooksのドキュメントを見てみると、見事に「useFocusNode()」「useTextEditingController()」というのが有りました。
GitHub - rrousselGit/flutter_hooks: React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase cod...
github.com
TextFormFieldのフォーカス管理をuseFocusNode()で行う
具体的なコードは以下の通りです。
Stateful Widgetで実装するのに比べて、コードがめちゃくちゃすっきりしました。
まとめ
世界の偉人が便利なパッケージを作ってくれる事で、私のような趣味グラマでも楽に開発が行える事に大感謝です。
いま開発中のアプリについては、来年の春には完成すると良いなと思ってます。
コメント