FlutterでID/Password入力画面を作ってみる
FlutterでID/Pass入力画面を作るときに設定するのパラメータをちょっと調べたのてまとめてみます。(※入力のバリデーションやオートフォーカス等のアクションは含みません)
よくあるID/Pass入力画面の要件
よくあるID/Passの入力画面の要件といえばこんな感じでしょうか。
ID入力
- 半角英数が入力できる
Password
- 半角英数が入力できる
- 入力内容はマスクしたい
- 入力内容を確認したいので、マスクの表示非表示を切り替えられるようにしたい
- 予測変換はさせたくないしヒストリーに記録なんてさせたくない
- 入力欄のコピペはブロックしたい
入力フォームはTextInputFiled
を使えば実現できます。中でTextFieldをラップしているようです。
TextFormField class - material library - Dart API
TextField constructor - TextField class - material library - Dart API
上記の要件に絡みそうなパラメータは以下の通りです。
- obscureText
- 入力内容のマスク表示の切り替え
- autocorrect
- オートコレクト・予測変換の有効・無効化
- enableInteractiveSelection
- 入力エリアのセレクトアクション(コピペ、選択、削除など)の有効・無効化
- TextInputType
- 立ち上げるキーボードタイプ。以下の種類がある。
- TextInputType class - services library - Dart API
- datetime
- emailAddress
- multiline
- number
- phone
- text
- url
- visiblePassword
今回の要件では、以下のような設定にするのがよさそうです。
ID入力欄
パラメータ | 値 | 理由 |
---|---|---|
obscureText | false | IDは常に見せておくため |
autocrrect | false/true | どちらでもよさそう。メールアドレスとかだとサジェストがあると嬉しいかもしれない。 |
enableInteractiveSelection | true | コピペしたいケースがありそうなので。 |
TextInputType | emailAddress | IDがメールアドレスのケースも多く、とりあえず半角英数で立ち上がってほしいので。 |
Password入力欄
パラメータ | 値 | 理由 |
---|---|---|
obscureText | true/false | 右端に目のアイコンを用意し、クリックで切り替えられるようにする。 |
autocrrect | false | パスワードは守りたいので。 |
enableInteractiveSelection | false | コピペはブロックしたいので。 |
TextInputType | visiblePassword | パスワードを見せる専用のキーボードタイプ。v1.9.1+hotfix-6から使える模様。 |
Widgetに上記の設定をしてiOS/Androidそれぞれエミュレータで動かしてみます。
今回試したコードサンプルはこちら。
なおPassword入力画面のパーツについては本家のflutter garallyにもあり、今回の実装の参考にしました。
実行環境は以下の通りです。
$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel unknown, v1.9.1+hotfix.6, on Mac OS X 10.14.6 18G87, locale en-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 11.3) [✓] Android Studio (version 3.5) [!] IntelliJ IDEA Ultimate Edition (version 2019.3) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] VS Code (version 1.41.0) ✗ Flutter extension not installed; install from https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter [✓] Connected device (2 available) ! Doctor found issues in 2 categories. $ flutter devices 2 connected devices: AOSP on IA Emulator • emulator-5554 • android-x86 • Android 9 (API 28) (emulator) iPhone 11 Pro Max • 424952E6-D634-4B19-AA9A-8552B62DE670 • ios •com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
挙動確認
iOS
想定通り動いてそうです。
Android
Androidも大丈夫そうです。
余談:TextInputTypeがvisiblePasswordじゃないとAndroidでautocorrectが効かないらしい。
そもそもFlutterにはautocorrectのバグがあったようです。
このバグの対処のために、最新のstableであるv1.12.13+hotfix.5
ではenableSuggestions
というパラメータが追加されたようです。
このパラメータ追加で予測変換を一律制御できるのかな〜と思ったのですがそもそもAndroidのみとのこと。またIssueのコメントにあるようにTextInputType.text
だと予測変換の無効化は効かない模様。まじかー。
入力のI/O周りはAndroidとiOSの両OSのモジュールをうまくラップして制御するのが難しいのでしょうかね。そういえばWebやDesktopもあるんだった・・・。
あと今回他のサービスはどうなってるのかな〜と思っていろいろ調べたのですが、ほとんどがWebViewでの入力画面が立ち上がるパターンでした。。。