新年あけましておめでとうございます。趣味グラマのNobu(@nm_aru)です。
2020年の初投稿になります。
合計8時間ほど悩んだあげく、ようやく解決法にたどり着いたFlutterネタです。
TextFieldをクリックしてもキーボードが表示されない
開発中のアプリで、入力画面を作った時にTextFieldを使いました。
そしていざ入力を試そうとクリックすると、フォーカスはあたるのですが、キーボードが表示されません…。
iPhoneシミュレータの場合は、設定メニューのHardware → Keyboard → Connect Hardware Keyboardが有効になっているとSoft Keyboardが表示されない事があるようですが、今回はiPhone実機、Androidエミュレータでもキーボードが表示されないため、残念ながら原因は違っていました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgyJUI3JUUzJTgzJTlGJUUzJTgzJUE1JUUzJTgzJUFDJUUzJTgzJUJDJUUzJTgyJUJGJUUzJTgzJUJDJUUzJTgxJUFCJUUzJTgyJUFEJUUzJTgzJUJDJUUzJTgzJTlDJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgxJThDJUU4JUExJUE4JUU3JUE0JUJBJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgxJUFBJUUzJTgxJTg0JUU2JTk5JTgyJUUzJTgxJUFFJUU1JUFGJUJFJUU1JTg3JUE2JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jZmIyNDI4YmUxNjRiNjdlZjFlNDc5NmI1MjE3NjJjMA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjdGFrJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yOWFjYzgzNzVhYzhlZjA1M2Q2Yjg0ZjU4MDM5MGJiYw&blend-x=142&blend-y=486&blend-mode=normal&s=8f1441de2daf163c4b17705cbb401729)
原因は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_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も上がっていました。
どうやら、Flutter for webの対応がこの問題の原因のようです。
既にプルリクがマージ済みになっているので、そのうちリリースされてくると思います。
このExceptionについては、発生してもアプリがクラッシュする訳ではないので、とりあえず「All Exceptions」のチェックを外す事で暫定対応とする事にしました。
まとめ
不具合の原因がどうしても分からない時は、ひとまずコードを小さくして再現するか試す事が多いのですが、今回ほど小さくしても再現する事はあまり経験が無かったので、かなり悩みました(´・ω・`)
今回のプルリクは僅か25日前に登録されたものなので、Flutterの開発スピードの速さには本当に感謝です。
年度内にはFlutterで1個目のアプリを出したいと思います!
コメント