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

Flutter

こんにちは。趣味グラマの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 read up on this and tried setting GlobalK...
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...

まぁ、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) { final _formKey = useMemoized(() =&...

まとめ

今回は中々答えにたどり着けず苦労しましたが、結局GitHubのissueには答えが載っている事が多いんだなと実感した一件でした。

先人達の苦労と知恵には感謝です。

コメント

タイトルとURLをコピーしました