TextFieldで入力文字を制限したい #Flutter

3 min readAug 1, 2020

答) inputFormattersにTextInputFormatterをセットする

e.g.

TextField(
  …,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly
  ],
  …,
)

FilteringTextInputFormatter

FilteringTextInputFormatter が用意されており、これを渡すだけでユーザーの入力に制限をかけることができる。

正規表現を渡し、これにマッチしないものは何も入力できなくなる仕様だ。

ユーザーに対しては、エラー表示はされないので、不正な入力値はキーボードを打っても打っても何も反映されない挙動となる。

許可(allow)、拒否(deny)の両側面から制限できる。

.allowはマッチするものだけを許可し、.denyはマッチするものだけを拒否する。

・FilteringTextInputFormatter.allow(RegExp(正規表現))
・FilteringTextInputFormatter.deny(RegExp(正規表現))

他にも、標準で用意されているものもある。
「数字のみ」「1行だけ（==改行を許可しない）」のふたつ。

・FilteringTextInputFormatter.digitsOnly
中身の実装は `FilteringTextInputFormatter.allow(RegExp(r’[0–9]’));`

・FilteringTextInputFormatter.singleLineFormatter
中身の実装は `FilteringTextInputFormatter.deny(‘\n’);`

TextInputFormatter.withFunctionを使うと、任意の処理を実行することが可能。
期待しない入力値が来たときにエラーを出して知らせたい場合、などにユースケースがあるだろう。

・TextInputFormatter.withFunction

e.g.

TextInputFormatter.withFunction((oldValue, newValue) =>
 RegExp(r’^[A-Za-z0–9]+’).hasMatch(newValue.text) ? newValue : oldValue)

以下は、Deprecatedになったので、利用しないこと。

・WhitelistingTextInputFormatter
・BlackelistingTextInputFormatter

変更はここでされた

github.com