新年あけましておめでとうございます。趣味グラマのNobu(@nm_aru)です。
2020年の初投稿になります。
合計8時間ほど悩んだあげく、ようやく解決法にたどり着いたFlutterネタです。
TextFieldをクリックしてもキーボードが表示されない
開発中のアプリで、入力画面を作った時にTextFieldを使いました。
そしていざ入力を試そうとクリックすると、フォーカスはあたるのですが、キーボードが表示されません…。
iPhoneシミュレータの場合は、設定メニューのHardware → Keyboard → Connect Hardware Keyboardが有効になっているとSoft Keyboardが表示されない事があるようですが、今回はiPhone実機、Androidエミュレータでもキーボードが表示されないため、残念ながら原因は違っていました。
原因はenableFlutterDriverExtension()だった
原因が分からず、ソースコードをどんどん単純化していき、遂には以下のコードにまで削ぎ落としました。
しかし、ここまでやってもまだキーボードが表示されません。
どうしたものかと、ふと目についた「enableFlutterDriverExtension()」を何気なしにコメントアウトしてみると…何とキーボードが表示されました！
今まで原因が分からず「flutter textfield keyboard not show up」とかでしか検索出来なかったのですが、遂に具体的なキーワードが特定できたので、早速検索するとissueが上がっていました。
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_driverto 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も上がっていました。
どうやら、Flutter for webの対応がこの問題の原因のようです。
既にプルリクがマージ済みになっているので、そのうちリリースされてくると思います。
このExceptionについては、発生してもアプリがクラッシュする訳ではないので、とりあえず「All Exceptions」のチェックを外す事で暫定対応とする事にしました。
まとめ
不具合の原因がどうしても分からない時は、ひとまずコードを小さくして再現するか試す事が多いのですが、今回ほど小さくしても再現する事はあまり経験が無かったので、かなり悩みました(´・ω・`)
今回のプルリクは僅か25日前に登録されたものなので、Flutterの開発スピードの速さには本当に感謝です。
年度内にはFlutterで1個目のアプリを出したいと思います！
コメント