TextFormFieldのフォーカス管理をuseFocusNode()で行う方法

Flutter

こんにちは。趣味グラマのNobu(@nm_aru)です。

毎週ちょっとずつだけ進めているFlutterアプリ開発。

今日は新しく使い始めてみたflutter_hooksネタです。

Flutter hooksはReact hooksのflutter版

Flutter hooksは、例によって@remi_rousseletさんによって開発されたパッケージです。

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 compl...
Flutter HooksのuseXXXの使い方 - Qiita
はじめに Flutter HooksとはReact HooksのFlutter版です。 React Hooksについてはこちらの記事がわかりやすいです。 5分でわかるReact Hooks 現在、Hooks自体が注目されている...
Inside Flutter Hooks - Qiita
概要 Flutter Hooksを使う機会があり、すごい便利だなと思っていたのですが、 内部的にどんな風に実装されているのか掘り下げてみようかと思い、今回色々調べてみました。 (何か間違っていたりしたらコメントいただけると嬉しい...

@remi_rousseletさんは、riverpodstate_notifierなど、Flutterでのアプリ開発に欠かせないパッケージを開発している超偉大な御方です。

TextFormFieldのフォーカス管理を行う

TextFormFieldを使っている時に、onFocus的な事をやりたくなる時があります。

そんな時は、TextFormFieldをStateful Widgetで囲って実装するやり方が普通(?)でした。

How to detect when a TextField is selected in Flutter? - Stack Overflow
FlutterでTextFieldにフォーカスが当たっているかどうか判定する - Qiita
検索などを実装するときに、キーボードにフォーカスが当たった瞬間別の画面を出すみたいな実装をする場合はがあるかと思います。 例えばこんな感じ このときの実装方法について説明します。 FocusNodeを使う FucusNo...

これらの記事を参考にStateful Widgetを作っている時に、ふと「あれ?hooks使っているのにStateful Widget使わないと駄目なんだっけ?」と思い、Flutter hooksのドキュメントを見てみると、見事に「useFocusNode()」「useTextEditingController()」というのが有りました。

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 compl...

TextFormFieldのフォーカス管理をuseFocusNode()で行う

具体的なコードは以下の通りです。

Stateful Widgetで実装するのに比べて、コードがめちゃくちゃすっきりしました。

まとめ

世界の偉人が便利なパッケージを作ってくれる事で、私のような趣味グラマでも楽に開発が行える事に大感謝です。

いま開発中のアプリについては、来年の春には完成すると良いなと思ってます。

コメント

タイトルとURLをコピーしました