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

こんにちは。趣味グラマの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 現在、Hooks自体が注目されているのと同時に、R...

qiita.com

Inside Flutter Hooks - Qiita

概要 Flutter Hooksを使う機会があり、すごい便利だなと思っていたのですが、 内部的にどんな風に実装されているのか掘り下げてみようかと思い、今回色々調べてみました。 (何か間違っていたりしたらコメントいただけると嬉しいです ) F...

qiita.com

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

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

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

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

Just a moment...

stackoverflow.com

FlutterでTextFieldにフォーカスが当たっているかどうか判定する - Qiita

検索などを実装するときに、キーボードにフォーカスが当たった瞬間別の画面を出すみたいな実装をする場合はがあるかと思います。 例えばこんな感じ このときの実装方法について説明します。 FocusNodeを使う FucusNodeにリスナーをセッ...

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()で行う

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

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class CustomTextFormField extends HookWidget {
  CustomTextFormField({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _focusNode = useFocusNode();
    final _controller = useTextEditingController();

    _focusNode.addListener(() {
      debugPrint("Focus Change : " + _focusNode.hasFocus.toString());
    });

    return Container(
      child: TextFormField(
        maxLines: null,
        minLines: 500,
        focusNode: _focusNode,
        controller: _controller,
      ),
    );
  }
}

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

まとめ

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

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