[Flutter] TextField의 Format을 변경해보자

안녕하세요.

오늘은 TextField의 Foramt을 변경하여, 통화(Currency, 전화번호 등을 조금 더 직관적으로 표현할 수 있는 방법을 알아보겠습니다.

---

TextField에는 inputFormatters라는 List<TextInputFormatter>? 타입의 인자가 있습니다.

이 inputFormatter를 활용하여, TextField의 Format을 바꾸거나, 특정 문자만 입력되게 할 수도 있습니다.

TextField(
	inputFormatters: [
    	FilteringTextInputFormatter.digitsOnly, // 숫자만 입력받로고
        FilteringTextInputFormatter.allow(Regex), // Regex만 허용
        FilteringTextInputFormatter.deny(Regex), // Regex를 차단
    ]
)

이 inputFormatter를 커스텀하여 입맛대로 사용할 예정입니다.

예시 코드는 통화를 표시하는 TextField를 만들어보겠습니다.

(통화를 표시한다는 건, 숫자 세 자리마다 , (콤마)를 넣어 수를 읽기 쉽게 해 준다는 것입니다.)

import 'package:flutter/services.dart';
import 'package:intl/intl.dart';

class CommaFormatter extends TextInputFormatter {
  CommaFormatter();

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }

    final numberStr = newValue.text.replaceAll(RegExp(r'[^0-9]'), '');
    final int parsedInt = int.parse(numberStr);
    final formatter = NumberFormat.currency(locale: 'ko', symbol: '');
    String newText = formatter.format(parsedInt);

    return newValue.copyWith(
      text: newText,
      selection: TextSelection.collapsed(offset: newText.length)
    );
  }
}

전체 코드입니다. 코드를 하나하나 설명드리면

TextInputFormatter를 상속받는 CommaFormatter를 만들었습니다.

그럼 formatEditUpdate 함수를 override 할 수 있는데, oldValue와 newValue를 통해 적절하게 사용하시면 됩니다.

 

저 같은 경우에는 통화를 표시하기 위해 String에서 숫자만 추출하여, int로 변환하였습니다.

그리고 NumberFormat을 사용하였습니다. 본인이 따로 로직을 만들어도 되지만, 제공해 주는 기능이 있어 사용하였습니다.

locale은 한국인 ko, 통화기호는 표시하지 않을 예정이라 공백으로 넣어주었습니다.

변환 후 newValue를 copyWith 함수를 사용하여 반환해 주었습니다.

 

그리고 이 InputFormatter를 TextField에 적용하시면 됩니다.

final _commaFormatter = CommaFormatter();
...
TextField(
	inputFormatter: [
    	_commaFormatter
    ]
)

 

짜잔

이렇게 잘 적용되었습니다.

사용자 입장에서도 보기 편해지고, 개발자 입장에서도 간단하게 구현할 수 있으니 잘 사용해 보시면 좋을 것 같습니다.