[Flutter] TextFieldを数字のみだけでなく、小数点も使えるようにする方法

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗

本題

こんにちは。いせりゅーです。
今回は、TextFieldについての記事はたくさんありましたが、「数字のみ」かつ「小数点は2文字目以降の入力ができる」という実装の記事が見つからなかったので、共有しようと思います！

やりたいこと

• 11.0Kや6.12Mなどをよく見かけるが即座に数字のみに変換するやり方を忘れてしまう
  →よし、作ろう。

問題点

• TextFieldの入力を数字のみにしたいー＞すぐにできた。
• でも小数点も入力できるようにしないとだめだな・・

数字のみの制限にする

数字のみの制限をするのはとても簡単に作ることができます。たった2行で実装することができます。

TextField(
  // 数値のキーボードが表示される
  keyboardType: TextInputType.number,
  // コピペなどで数字以外の入力を防ぐ
  inputFormatters: [FilteringTextInputFormatter.digitsOnly]
),

上のコードで実装自体は、70％ぐらいできましたが、「小数点は2文字目以降の入力ができる」という実装はまだできていません。
現状だと、数字のみの入力になるため、小数点は入力できません。

小数点を入力できるようにするには以下の考え方が必要になります。

• 最初の1行目は小数点を入力できないようにする
  • 例）.01や.10は 今回の実装としては、入力できないようにしたい。
• 2文字以降は自由に使えるようにしたい。
• 小数点は、1回までの入力にしたい
  • 例）1.01.0や1.0.0.1.3...4などは変換するうえで不正な値になるから避けたい。

では実装した内容をご紹介します。

TextField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.allow(RegExp(r'^\d+(\.\d*)?')),
  ],
)

最後に

今回、参考になる記事が見つからなかったときに、いろいろと試行錯誤を練ることはとてもいいなと思いました。考え方さえ理解してしまえば、ChatGPTと協力すれば実装できる気がしています。
今回の一番の収穫は、考え方を自分なりにまとめられたことだと思います。このいい発見を今後も実感できるといいなと思います！！