Custom TextInputFormatter Auto Fill Hyphen [Flutter]

JapanesePhoneNumberFormatter.dart

class JapanesePhoneNumberFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final oldValueLength = oldValue.text.length;
    final newValueLength = newValue.text.length;
    final isStartZero = newValue.text.startsWith('0');

    if (newValueLength > 0 && newValueLength > oldValueLength) {
      final maxLengthIncludeHyphen = isStartZero ? 13 : 12;
      if (newValueLength > maxLengthIncludeHyphen) {
        return oldValue;
      }
      if (newValueLength == (isStartZero ? 3 : 2)) {
        return newValue.copyWith(
          text: newValue.text + '-',
          selection: TextSelection.collapsed(offset: (isStartZero ? 4 : 3)),
        );
      }
      if (newValueLength == (isStartZero ? 8 : 7)) {
        return newValue.copyWith(
          text: newValue.text + '-',
          selection: TextSelection.collapsed(offset: (isStartZero ? 10 : 9)),
        );
      }
    }
    return newValue;
  }
}

勝手にハイフンが入るフォーマッター

使い方

           TextFormField(
              onChanged: (value) {
              },
              inputFormatters: [
                // FilteringTextInputFormatter.digitsOnly,
                JapanesePhoneNumberFormatter(),
              ],
              /// 電話番号のmaxは15桁のため
              maxLength: 15,
            )

CleanShot.2021-09-14.at.16.44.42.mp4