MENU

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

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

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

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',
        ),
      ),
    );
  }
}

Flutterが学べる書籍

created by Rinker
シーアンドアール研究所
Share
  • URLをコピーしました!

Comment

コメントする

目次