Zenn
📝

【Flutter】フォーム入力時に電場番号に余白を入れるフォーマッター

2025/03/15に公開

電場番号に余白を入れるフォーマッター

TextFormFieldで使うフォーマッターになります。

000 9999 8888 みたいな表示がされます。
分かりやすさがプラスされた感じですかね。
こちらチートシートになります。


/// 数字にスペースを入れるフォーマッター (11文字制限)
class PhoneNumberFormatter extends TextInputFormatter {
  
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    // 入力文字列からスペースを取り除き、数字のみ取得
    var digits = newValue.text.replaceAll(' ', '');

    // 数字が11桁を超えないように制限
    if (digits.length > 11) {
      digits = digits.substring(0, 11);
    }

    // 桁数に応じてスペースを挿入
    if (digits.length > 3 && digits.length <= 7) {
      digits = '${digits.substring(0, 3)} ${digits.substring(3)}';
    } else if (digits.length > 7) {
      digits =
          '${digits.substring(0, 3)} ${digits.substring(3, 7)} ${digits.substring(7)}';
    }

    // カーソルは末尾にしておく
    return newValue.copyWith(
      text: digits,
      selection: TextSelection.collapsed(offset: digits.length),
    );
  }
}

Discussion

ログインするとコメントできます