文系プログラマー「いお」が語る

主にプログラミング関連の記事を書いています。

トップ > Flutter > 【Flutter】【コピペでOK！】TextFieldに入力する文字を「数字のみ」や「英数字と記号のみ」のように制限する方法（サンプルつき）
最終更新日

【Flutter】【コピペでOK！】TextFieldに入力する文字を「数字のみ」や「英数字と記号のみ」のように制限する方法（サンプルつき）

Flutter

今回はTextFieldに入力する文字を制限する方法についてです。いくつか例を用いて説明します。そのままコピペでOKです！

 

この記事で分かること

✅TextFieldに入力する値を制限する方法

 

目次

 

①数字のみにしたい場合

TextField(
    keyboardType: TextInputType.number,//数字のキーボードを表示
    inputFormatters: [FilteringTextInputFormatter.digitsOnly]//数字のみ入力可にする
)

keyboardTypeをTextInputType.numberに設定することで数値のキーボードが表示されるようになります。しかしこの記述だけだとカンマやピリオドが入力でき、コピペで数字以外を入力することも可能です。そのため、inputFormattersを指定して制御します。ここにFilteringTextInputFormatter.digitsOnlyを設定することで数字以外が入力できないようになります。

 

②英数字と記号のみにしたい場合

TextField(
    inputFormatters: [
        FilteringTextInputFormatter.allow(
            RegExp(r'[a-zA-Z0-9@_.-]')//英数字、@、_、.、-のみ入力可にする
        ),
    ],
)

数字のみの場合は①のように用意されたメソッドがありましたが、特定の文字だけに制限したいときがあると思います。そんな時はFilteringTextInputFormatter.allow()メソッドを記述し、正規表現の形式を指定することで実装します。上の例では英数字と@（アットマーク）、_（アンダーバー）、.（ドット）、-（ハイフン）のみが入力可能になります。

 

③数字とハイフンのみにしたい場合

TextField(
    inputFormatters: [
        FilteringTextInputFormatter.allow(
            RegExp(r'[0-9-]')//数字とハイフンのみ入力可にする
        ),
    ],
)

この場合も②と同様正規表現で指定します。これで数字とハイフンのみが入力可能になります。

 

まとめ

TextFieldの入力を制限する場合は基本的には正規表現で指定する。数字のみの場合だけFilteringTextInputFormatter.digitsOnlyが用意されてるので使う。（もちろん正規表現で指定も可）

 

正規表現については以下↓↓↓がわかりやすいです。
https://userweb.mnet.ne.jp/nakama/

 

※もし「range out of order in character class[***]」というエラーが発生した場合は以下を参照してみてください。

 

おわりに

今回はTextFieldに入力する文字を制限する方法についてでした。ユーザーに入力を求めるアプリケーションでは入力文字を制限することはよくあるのでぜひ覚えておきましょう！

最後までお読みいただきありがとうございました！