@takamii228知は力なり2019-12-14FlutterでID/Password入力画面を作ってみるFlutterでID/Pass入力画面を作るときに設定するのパラメータをちょっと調べたのてまとめてみます。(※入力のバリデーションやオートフォーカス等のアクションは含みません)よくあるID/Pass入力画面の要件よくあるID/Passの入力画面の要件といえばこんな感じでしょうか。半角英数が入力できるPassword半角英数が入力できる入力内容はマスクしたい入力内容を確認したいので、マスクの表示非表示を切り替えられるようにしたい予測変換はさせたくないしヒストリーに記録なんてさせたくない入力欄のコピペはブロックしたい入力フォームはTextInputFiledを使えば実現できます。中でTextFieldをラップしているようです。API上記の要件に絡みそうなパラメータは以下の通りです。obscureText入力内容のマスク表示の切り替えautocorrectオートコレクト・予測変換の有効・無効化enableInteractiveSelection入力エリアのセレクトアクション(コピペ、選択、削除など)の有効・無効化TextInputType立ち上げるキーボードタイプ。APIdatetimeemailAddressmultilinenumberphonetexturlvisiblePassword今回の要件では、以下のような設定にするのがよさそうです。メールアドレスとかだとサジェストがあると嬉しいかもしれない。コピペしたいケースがありそうなので。IDがメールアドレスのケースも多く、とりあえず半角英数で立ち上がってほしいので。右端に目のアイコンを用意し、クリックで切り替えられるようにする。パスワードは守りたいので。コピペはブロックしたいので。パスワードを見せる専用のキーボードタイプ。v1.9.1+hotfix-6から使える模様。Widgetに上記の設定をしてiOS/Androidそれぞれエミュレータで動かしてみます。今回試したコードサンプルはこちら。garallyにもあり、今回の実装の参考にしました。github.com実行環境は以下の通りです。(simulator)挙動確認iOS想定通り動いてそうです。AndroidAndroidも大丈夫そうです。余談:TextInputTypeがvisiblePasswordじゃないとAndroidでautocorrectが効かないらしい。そもそもFlutterにはautocorrectのバグがあったようです。github.comこのバグの対処のために、最新のstableであるv1.12.13+hotfix.5ではenableSuggestionsというパラメータが追加されたようです。このパラメータ追加で予測変換を一律制御できるのかな〜と思ったのですがそもそもAndroidのみとのこと。IssueのコメントにあるようにTextInputType.textだと予測変換の無効化は効かない模様。入力のI/O周りはAndroidとiOSの両OSのモジュールをうまくラップして制御するのが難しいのでしょうかね。いえばWebやDesktopもあるんだった・・・。あと今回他のサービスはどうなってるのかな〜と思っていろいろ調べたのですが、ほとんどがWebViewでの入力画面が立ち上がるパターンでした。検索はてなブログをはじめよう!takamii228さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。