`flutter_hooks`を使用して`TextField`を扱う場合に`controller`プロパティには`useTextEditingController`で生成したインスタンスを渡す

3264 ワード
Flutter Flutter_Hooks Dart Dart テキストリンク

TL;DR

flutter_hooksを使用してテキストフィールドを扱う時にHookWidgetを継承したクラスの場合TextEditingControllerだとうまく動かなかったのでuseTextEditingController使う。

詳細

発生する問題

以下のようにHookWidgetを継承したクラスでTextFieldコンポーネントを扱う場合に、TextFieldのcotrollerプロパティに、Flutter標準のTextEditingControllerのインスタンスを渡しています。

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

class Sample extends HookWidget {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      labelText: "Input",
    )
  }
}

すると以下のような不具合が発生していた通りに動作しませんでした。

  • 値を入力した後にテキストフィールドからフォーカスを外すと入力した値が消えてしまう
  • useEffectなど別の関数でcontroller.textの初期値を入力するなど行っても反映されない

対応

HookWidgetを継承しているクラスの中でTextEditingControllerを扱う場合はflutter_hooksで 用意されているuseTextEditingControllerを使用して生成されたインスタンスを使う必要がありました。

以下の変更加えることで前述した不具合は解消されます。

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

class Sample extends HookWidget {
-  final _controller = TextEditingController();
+  final _controller = useTextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      labelText: "Input",
    )
  }
}

環境

  • Flutter 2.10.0
  • Dart SDK version: 2.16.0