[Flutter] TextField의 값을 TextInputFormatter를 이용하여 내가 원하는 포멧으로 바꾸기

Flutter에서 사용자의 입력을 받을 때는 주로 TextField를 사용하게 되는데, 아무 값이나 아무 포멧으로 받아들이는게 아니고 내가 원하는 값을 원하는 포멧으로만 받아들일 수 있도록 설정하고 싶은 경우가 생긴다.

예를 들면 전화번호 입력창이나 카드번호 입력창의 경우, UX적인 부분에 있어서도 정해진 포멧으로 자동으로 입력이 되는 것이 사용자 입장에서도 알기 쉽다.

이번 포스트에서는 Flutter의 TextField를 자기가 원하는 포멧으로 바꿀 수 있는 TextInputFormatter에 대해 간단하게 알아보도록 한다.

기본적으로 사용할 수 있는 것들

TextField의 포멧을 임의대로 설정하기 위해서는 TextField 위젯의 inputFormatters 옵션을 설정하면 된다. 이미 기본적으로 탑재되어 있는 TextFormatter의 옵션 중에 대표적인 것들은 FilteringTextInputFormatter.allow() 와 FilteringTextInputFormatter.deny() 가 있다. 이 두가지는 Regex를 지정해주면 Regex의 패턴을 충족하는 값만 받아 들이거나 입력이 되지 않도록 만들 수 있다.

그 외에 숫자 입력만 허용하고 싶을 경우는 FilteringTextInputFormatter.digitsOnly를 사용 할 수 있다.

TextField(
	//...다른 코드는 생략
	inputFormatters: <TextInputFormatters>[
    	FilteringTextInputFormatter.digitsOnly,
        FilteringTextInputFormatter.allow(<Regex패턴>)
    ]
)

이런 식으로 여러가지 패턴을 지정해 줄 수 있다.

내가 원하는 TextInputFormatter를 만들기

예를 들어 가격을 입력하는 필드를 만들고 싶을 경우, 일단 숫자만 입력되게 하고 싶기도 하지만, 00000과 같은 숫자는 입력되지 않게 하고 싶고, 숫자 앞에 화폐 기호가 자동으로 나오게 하고 싶고, 천단위로 콤마가 표시되도록 하고 싶을 수 있다.

그러한 Formatter를 따로 만들어 보자. 여기서는 CurrencyFormatter라는 이름으로 Formatter를 만들어 본다.

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

class CurrencyFormatter extends TextInputFormatter {
  CurrencyFormatter();

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // 아무 값이 없을 경우 (값을 지운경우) 지운 값을 그대로 설정
    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }
	
    // 새로 입력된 값을 포멧
    final int parsedValue = int.parse(newValue.text); // NumberFormat은 숫자 값만 받을 수 있기 때문에 문자를 숫자로 먼저 변환
    final formatter = NumberFormat.simpleCurrency(locale: 'ko'); // 천단위로 콤마를 표시하고 숫자 앞에 화폐 기호 표시하는 패턴 설정
    String newText = formatter.format(parsedValue); // 입력된 값을 지정한 패턴으로 포멧

    return newValue.copyWith(
        text: newText,
        selection: TextSelection.collapsed(offset: newText.length)); // 커서를 마지막으로 이동
  }
}

비교적 간단하다. TextInputFormatter 를 extend 하는 클래스를 하나 작성 한 후, formatEditUpdate 를 override 해서 자기가 원하는 걸 이곳에 구현하면 된다.

화폐 단위 표시해주고, 천 단위로 콤마를 표시해주는 기능을 스스로 구현해도 되지만, Flutter에는 이미 intl 패키지에 NumberFormat이라는 유용한 클래스가 존재한다. 숫자를 여러가지 포맷으로 변경해주는 클래스인데, 화폐단위 같은 경우는 simpleCurrency() 메소드를 사용하면 자동으로 숫자를 포멧해준다.

새롭게 만든 Formatter를 사용하고 싶은 코드에 import 한 다음, TextField의 inputFormatters에 추가해주면 된다.

TextField(
	//...다른 코드는 생략
	inputFormatters: <TextInputFormatters>[
    	FilteringTextInputFormatter.digitsOnly,
        CurrencyFormatter(),
    ]
)

간단하게 TextField의 값을 자동으로 내가 원하는 패턴으로 Format 하는 법에 대해 알아보았다. Flutter 공식 팀에서 일반적으로 많이 사용되는게 예상되는 패턴은 기본 옵션으로 제공해주면 좋겠지만 (카드 값, 전화번호 등) 당분간은 스스로 만들던지 이미 누가 작성해 놓은 것을 사용하던지 해야 한다.

원하는 패턴을 코드로 구현 할 줄 만 알면 어떤 포멧으로든 만들 수 있으니 상황에 맞게 잘 커스터마이징 해보자.