thousands_separator_formatter 1.0.0

A TextInputFormatter that inserts thousands separators into a TextField as the user types, keeping the caret next to the same character.

A TextInputFormatter that inserts thousands separators into a TextField as the user types — 1000000 becomes 1,000,000 — while keeping the caret next to the same character.

Most hand-rolled grouping formatters get the display right and the editing wrong: the caret jumps to the end of the field, selections collapse, and IME input breaks mid-composition. This one handles those cases.

Features

• Caret stability. Editing in the middle of 1,234,567 leaves the caret next to the character you typed instead of jumping to the end.
• Selection preservation. A non-collapsed selection keeps covering the same characters, and a reversed selection keeps its direction.
• IME safe. Reformatting is skipped while a composing region is active, so Korean, Japanese, and Chinese input methods are not interrupted mid-composition.
• Non-Western digits. Persian and Arabic-Indic digits group correctly with no extra configuration, because anything that is not the separator is treated as a value character.
• Configurable grouping. The separator, group size, and decimal handling are explicit parameters.
• No dependencies. Pure Flutter; no intl.

Getting started

Add the package:

flutter pub add thousands_separator_formatter

Then import it:

import 'package:thousands_separator_formatter/thousands_separator_formatter.dart';

Usage

Pass the formatter to TextField.inputFormatters. The formatter only groups characters; it does not restrict what can be entered. Compose it with FilteringTextInputFormatter.digitsOnly to limit input to digits, with the filter first so grouping runs on the already-filtered value:

TextField(
  keyboardType: TextInputType.number,
  inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly,
    const ThousandsSeparatorTextInputFormatter(),
  ],
)

Options

Parameter	Default	Description
separator	','	Character inserted between groups.
groupSize	3	Characters per group.
allowDecimal	false	When true, text at and after decimalSeparator is left ungrouped.
decimalSeparator	'.'	Character introducing the fractional part.

// Space-separated groups of two: 100000 -> "10 00 00"
const ThousandsSeparatorTextInputFormatter(separator: ' ', groupSize: 2);

// Group only the integer part: 1234.5678 -> "1,234.5678"
const ThousandsSeparatorTextInputFormatter(allowDecimal: true);

A complete example is in the example/ folder.

Additional information

Locale

separator, groupSize, and decimalSeparator are explicit parameters rather than being derived from a locale, so this package has no dependency on intl. Pick values appropriate for your user's locale.

Not supported

• Locale-aware defaults. The formatter never inspects the ambient locale. For formatting values that are already committed rather than being typed, use NumberFormat from the intl package.
• Variable group sizes. groupSize is a single value, so conventions that mix group widths — such as the Indian 1,00,000 pattern — are out of scope.
• Input filtering. Use FilteringTextInputFormatter for that.

Issues

File bugs and feature requests on the issue tracker.