FlutterのTextFieldを入力制限する方法

TextInputTypeではモバイルでのキーボードしか制限できないので、Flutter Webやコピペで好きなように入力できてしまいます。

なので、今回はTextInputFormatterを使って入力制限をする方法をまとめます。

指定した文字だけ入力を許可する

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(ここで指定する))
  ],
),

指定した文字の入力を受け付けない

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.deny(RegExp(ここで指定する))
  ],
),

数字のみの入力を受け付けたい場合

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp('[0-9]'))
  ],
),

もしくは、Static Propertiesにある「.digitsOnly」でも数字のみに指定できます。

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

RegExpとは

RegExpは正規表現と言われるものらしいです。
書き方は「正規表現 書き方」などで調べればたくさん出てくると思います。
とりあえず、FlutterのTextFieldではRegExp(String)で書けばできるみたいです。

文字数を制限する

TextField(
  inputFormatters: [
    LengthLimitingTextInputFormatter(11)//(int)で文字数を特定
  ],
),

もしくは、maxLengthでも制限できる。

TextField(
  maxLength:11 //int
),

maxLengthで制限すると画像のように文字数がカウントされる。