Flutter HooksとFormBuilderでキーボードが消える件の対処法

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

Flutter FormBuilderでフォームを作成する際に、TextFormFieldにフォーカスを当てると、キーボードが一瞬表示されてすぐ消えてしまうという現象に遭遇しました。

Flutterのフォーム周りでは良くある現象みたいで、解決策も簡単です。

Keyboard disappearing when focussing on TextFormField · Issue #20042 · flutter/flutter

Whenever I try to enter text into a TextFormField, the keyboard pops up for a brief second and hides away instantly. I r...

Flutter: keyboard disappears immediately when editing my text fields

Issue I'm trying to build an app front end with flutter and it's my first time so I faced...

form.dart

class FormTestState extends State<FormTest> {
  
  final _formKey = GlobalKey<FormBuilderState>(); // ←これを追加
  
  @override
  Widget build(BuildContext context) {
    return FormBuilder(
      // 略
      key: _formKey, // ←これを追加
      // 略
    );
  }
}

まぁ、FormBuilderのExampleをそのまま使っていれば遭遇しない現象でもあるのですが…(反省)

ただ、Flutter Hooksを用いて同じ事を実現しようとすると中々うまくいかずハマったため、備忘録として残したいと思います。

Flutter HooksとFormBuilderではuseMemorizedを使用する

Flutter Hooksを使っている場合、最初に書いたGlobalKeyをそのまま使う形式だと、またもキーボードが消えてしまう不具合が発生します。

色々とググった結果、GlobalKeyをuseMemorizedを使って生成すると上手くいく事が分かりました。

How to use it in a form? ?? Issue #185 ?? rrousselGit/flutter_hooks

I'm trying to use hooks within my form, my approach looks like this: class MyWidget extends HookWidget { build(context) ...

form.dart

class HogeWidget extends HookConsumerWidget {

  // 略
  @override
  Widget build(BuildContext context, WidgetRef ref {
    // 略
    final formKey = useMemorized(() => GlobalKey<FormBuilderState>());
    // 略
     
    return FormBuilder(
      // 略
      key: formKey
      // 略
    );
  }
}