【Flutter/Dart】TextFieldで文字列をフォーマットする

やりたいこと

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の値

フォーマット処理が文字数を変えるような場合（例えば￥や,を追加する場合など）は、フォーマット後の長さを設定する。