🌟

キーボードが表示されない場合、Formのkey属性に注意しよう

2024/06/24に公開

FlutterでTextFieldを表示すると、当然ですが、下からキーボードが表示されます。

キーボードが表示された時、そのWidgetはリビルドされます。

以下のようなコードを書いているとbuild時にFormKeyが再発行されるため、キーボードを表示する事にリビルドされ、キーボードが表示されないです。正確には、キーボードは表示しようとしていますが、formKeyが変わることでForm全体のリビルドが走ってしまい、キーボードが表示できない、だと思われます。

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

class SampleForm extends HookConsumerWidget {
  const SampleForm({super.key});

  
  Widget build(BuildContext context, WidgetRef ref) {
    final formKey = GlobalKey<FormState>();
    final controller = useTextEditingController();

    return Form(
      key: formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            controller: controller,
          ),
        ],
      ),
    );
  }
}

対策は単純で、グローバルにする(Widgetの外に出す)か、Hooksをお使いなら、useMemonizedを使います。
こうすれば、何度もbuildが実行されても、初期値をキャッシュするので、Formのリビルドは起きないので、キーボードもちゃんと表示されてます。

final formKey = useMemoized(() => GlobalKey<FormState>());

Discussion