検索
【Flutter/Dart】TextFieldで文字列をフォーマットする
- M.R
- 2024年2月11日
- 読了時間: 1分
やりたいこと
TextFieldで入力フォームを作りたい。
例えば入力内容が金額の場合、3桁区切りで頭に￥を付けた表記にしたい。
ただしユーザにこれらを入力させるのではなく、ユーザはあくまで数字を入力するだけで、アプリ側で自動でフォーマットしたい。
方法
TextInputFormatterを継承し、所望のフォーマット処理を追加することで実現可能。
例えばこの記事などを参照。
以下は個人的に躓いた点を説明する。
formatEditUpdateへの入力
formatEditUpdateへの入力、つまり引数のoldValueはフォーマット後の文字列が来る。
ユーザが入力した数字ではないので注意。
TextEditingValue.selectionの値
フォーマット後の文字数で再計算する。
当初これは、TextEditingValue.selectionをnewValue.selectionとしていたが、この場合
フォーマット後の文字数が短くなると、範囲外を参照してしまい、
formatEditUpdateで下記のエラーが発生した
Range start <int> is out of text of length <int>
入力値""への対応
TextField.keybordTypeをTextInputType.numberとしていても、””が来る可能性はある
例えば入力を全削除した場合など。
TextField.maxLengthの値
フォーマット処理が文字数を変えるような場合（例えば￥や,を追加する場合など）は、フォーマット後の長さを設定する。
コメント