【Flutter】キーボードの入力値を数字と小数点だけ許可するには？

2023年11月25日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

TextFieldに入力できる値を数字と小数のみにしたい場合、keyboardTypeとinputFormattersプロパティを次のように指定して制限します。

TextField(
...
  keyboardType: const TextInputType.numberWithOptions(decimal: true), // キーボードの入力を数字と小数点にする
  inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^[0-9.]+'))] // 入力できる値を0〜9、.に制限する
)

keyboardTypeの設定で、キーボードで数字と小数点のみ入力できるようになります。

しかし、この設定だけの場合、例えばコピーしたテキストをTextField内にペーストできてしまいます。

それを防ぐためにはinputFormattersで入力値を制限しています。

サンプルコード

class MyForm extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        controller: _controller,
        keyboardType: const TextInputType.numberWithOptions(decimal: true),
        inputFormatters: [
          FilteringTextInputFormatter.allow(RegExp(r'^[0-9.]+')),
        ],
        decoration: const InputDecoration(
          labelText: 'Enter a number',
        ),
      ),
    );
  }
}