つばくろぐ @takamii228

知は力なり

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

今回の要件では、以下のような設定にするのがよさそうです。

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それぞれエミュレータで動かしてみます。

今回試したコードサンプルはこちら。

github.com

なおPassword入力画面のパーツについては本家のflutter garallyにもあり、今回の実装の参考にしました。

github.com

実行環境は以下の通りです。

$ 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

f:id:takamii228:20191214225141p:plainf:id:takamii228:20191214225400p:plainf:id:takamii228:20191214225410p:plain

想定通り動いてそうです。

Android

f:id:takamii228:20191214225437p:plainf:id:takamii228:20191214225447p:plainf:id:takamii228:20191214225459p:plain

Androidも大丈夫そうです。

余談:TextInputTypeがvisiblePasswordじゃないとAndroidでautocorrectが効かないらしい。

そもそもFlutterにはautocorrectのバグがあったようです。

github.com

このバグの対処のために、最新のstableであるv1.12.13+hotfix.5ではenableSuggestionsというパラメータが追加されたようです。 このパラメータ追加で予測変換を一律制御できるのかな〜と思ったのですがそもそもAndroidのみとのこと。またIssueのコメントにあるようにTextInputType.textだと予測変換の無効化は効かない模様。まじかー。

入力のI/O周りはAndroidiOSの両OSのモジュールをうまくラップして制御するのが難しいのでしょうかね。そういえばWebやDesktopもあるんだった・・・。

あと今回他のサービスはどうなってるのかな〜と思っていろいろ調べたのですが、ほとんどがWebViewでの入力画面が立ち上がるパターンでした。。。