【Flutter】TextFieldでキーボードが表示されない

Flutter

新年あけましておめでとうございます。趣味グラマのNobu(@nm_aru)です。

2020年の初投稿になります。

合計8時間ほど悩んだあげく、ようやく解決法にたどり着いたFlutterネタです。

TextFieldをクリックしてもキーボードが表示されない

開発中のアプリで、入力画面を作った時にTextFieldを使いました。

そしていざ入力を試そうとクリックすると、フォーカスはあたるのですが、キーボードが表示されません…。

iPhoneシミュレータの場合は、設定メニューのHardware → Keyboard → Connect Hardware Keyboardが有効になっているとSoft Keyboardが表示されない事があるようですが、今回はiPhone実機、Androidエミュレータでもキーボードが表示されないため、残念ながら原因は違っていました。

シミュレーターにキーボードが表示されない時の対処法 - Qiita
##シミュレーターの設定を確認する Xcodeのシミュレーターにキーボードが表示されない場合は、次の設定を確認します。 シミュレーターのメニューから、 1) Hardware → Keyboard を選択する。 2) Conn...

原因はenableFlutterDriverExtension()だった

原因が分からず、ソースコードをどんどん単純化していき、遂には以下のコードにまで削ぎ落としました。

しかし、ここまでやってもまだキーボードが表示されません。

どうしたものかと、ふと目についた「enableFlutterDriverExtension()」を何気なしにコメントアウトしてみると…何とキーボードが表示されました!

今まで原因が分からず「flutter textfield keyboard not show up」とかでしか検索出来なかったのですが、遂に具体的なキーワードが特定できたので、早速検索するとissueが上がっていました。

Keyboard not showing when flutter driver extension is enabled · Issue #33693 · flutter/flutter
Steps to Reproduce Run the following main.dart via flutter run on a physical device and tap on either of the fields presented. import 'package:flutter/mater...

enableFlutterDriverExtension()が何のためにあるかと言うと、

Enables Flutter Driver VM service extension.

This extension is required for tests that use package:flutter_driver to drive applications from a separate process.

(意訳)

Flutter Driver VM service extensionを有効にします。

このextensionは、package:flutter_driverを使うテストが、別のプロセスからアプリケーションを実行するために必要とされます。

https://api.flutter.dev/flutter/flutter_driver_extension/enableFlutterDriverExtension.htm

という事でした。何か日本語にするのが難しい…。

そして、Flutter Driver VM service extensionって何なのと言うのは、以下のページに書いてありました。

This library provides a Dart VM service extension that is required for tests that use package:flutter_driver to drive applications from a separate process, similar to Selenium (web), Espresso (Android) and UI Automation (iOS).

(意訳)

要はSeleniumやEspresso、Automationとかと同じだよ。

https://api.flutter.dev/flutter/flutter_driver_extension/flutter_driver_extension-library.html

意訳が凄い手抜きですが、前半部分は先ほどの文章を変わらないので…。

つまり、Seleniumみたいに自動でUIを使ったテストをする仕組みのようです。

私は自動UIテストを使わないので、さくっとコメントアウトする事にしました。

TextInput.setEditableSizeAndTransformでMissingPluginExceptionが発生

キーボードが出るようになったので、早速入力を試そうとしたところ、キーボードを表示するタイミングでMissingPluginExceptionが発生しました。

これは、VSCodeのデバッガの設定で「All Exceptions」にチェックを入れていないと気付かないようで、私もちょうどチェックを入れていたために気付きました。

そして、例によってissueも上がっていました。

"No implementation found for method TextInput.setEditableSizeAndTransform on channel flutter/textinput" · Issue #40427 · flutter/flutter
Hi, I just hit this exception when I have Break on all exceptionsenabled in VS code and I click on a TextFormField on my Emulator. Is this as designed? Flutter...

どうやら、Flutter for webの対応がこの問題の原因のようです。

既にプルリクがマージ済みになっているので、そのうちリリースされてくると思います。

Avoid calling web-only method outside of web by dnfield · Pull Request #46843 · flutter/flutter
Description setEditableSizeAndTransform was introduced specifically for web, and is not implemented on any other platform. It throws an exception that gets swa...
Avoid exceptions for control flow by dnfield · Pull Request #46897 · flutter/flutter
Description This ensures that we don't use exceptions for control flow in OptionalMethodChannels, which can cause unpleasant debugging experiences for users...

このExceptionについては、発生してもアプリがクラッシュする訳ではないので、とりあえず「All Exceptions」のチェックを外す事で暫定対応とする事にしました。

まとめ

不具合の原因がどうしても分からない時は、ひとまずコードを小さくして再現するか試す事が多いのですが、今回ほど小さくしても再現する事はあまり経験が無かったので、かなり悩みました(´・ω・`)

今回のプルリクは僅か25日前に登録されたものなので、Flutterの開発スピードの速さには本当に感謝です。

年度内にはFlutterで1個目のアプリを出したいと思います!

コメント

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