🌟
キーボードが表示されない場合、Formのkey属性に注意しよう
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