[Flutter] 세 자리마다 쉼표가 있는 TextField 구현하기

 

 

 

 

 

 

 

https://pub.dev/packages/intl

intl | Dart package

앱의 텍스트, 날짜, 숫자 등의 Format을 도와주는 intl 패키지를 설치합니다.

 

 

 

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

class CommaTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    final newParseString = NumberFormat().format(
      int.parse(
        newValue.text.replaceAll(',', ''),
      ),
    );

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

 

  TextField(
    inputFormatters: [
      CommaTextInputFormatter(),
    ],
  ),

 

TextInputFormatter를 상속받은 클래스를 TextField inputFormatters에 넣어주면 됩니다.