При разработке мобильных приложений с помощью Flutter одним из распространенных требований является форматирование текстовых полей для отображения значений денежных единиц. Форматирование валюты помогает улучшить взаимодействие с пользователем, предоставляя знакомое и легко читаемое представление денежных значений. В этой статье мы рассмотрим несколько методов форматирования валюты во Flutter TextFields, дополненные примерами кода и разговорными объяснениями.

Метод 1: использование пакета intl
Один из самых популярных и универсальных способов форматирования валюты во Flutter — использование пакета intl. Этот пакет предоставляет набор мощных инструментов локализации и интернационализации, включая форматирование валют. Вот пример того, как его использовать:

import 'package:intl/intl.dart';
// Inside your TextField widget
TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')),
    CurrencyInputFormatter()
  ],
);
class CurrencyInputFormatter extends TextInputFormatter {
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }
    double value = double.parse(newValue.text);
    final formatter = NumberFormat.currency(
      locale: 'en_US',
      symbol: '\$',
      decimalDigits: 2,
    );
    String newText = formatter.format(value / 100);
    return newValue.copyWith(
      text: newText,
      selection: TextSelection.collapsed(offset: newText.length),
    );
  }
}

Метод 2: пользовательская функция форматирования
Если вы предпочитаете более индивидуальный подход, вы можете реализовать собственную функцию форматирования. Это позволяет вам иметь детальный контроль над форматом валюты. Вот пример:

TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  keyboardType: TextInputType.number,
  onChanged: (value) {
    String formattedValue = formatCurrency(value);
    _controller.text = formattedValue;
    _controller.selection = TextSelection.fromPosition(
      TextPosition(offset: formattedValue.length),
    );
  },
);
String formatCurrency(String value) {
  int intValue = int.tryParse(value.replaceAll(',', '')) ?? 0;
  String formattedValue = NumberFormat.currency(
    locale: 'en_US',
    symbol: '\$',
    decimalDigits: 2,
  ).format(intValue / 100);
  return formattedValue;
}

Метод 3: пакет FlutterMoneyFormatter
Еще один полезный пакет для форматирования валюты во Flutter — flutter_money_formatter. Он предлагает простой и интуитивно понятный API для форматирования значений валюты. Вот пример:

import 'package:flutter_money_formatter/flutter_money_formatter.dart';
TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  keyboardType: TextInputType.number,
  onChanged: (value) {
    FlutterMoneyFormatter fmf = FlutterMoneyFormatter(
      amount: double.parse(value),
      settings: MoneyFormatterSettings(
        symbol: '\$',
        thousandSeparator: ',',
        decimalSeparator: '.',
        symbolAndNumberSeparator: ' ',
        fractionDigits: 2,
      ),
    );
    _controller.text = fmf.output.symbolOnLeft;
    _controller.selection = TextSelection.fromPosition(
      TextPosition(offset: fmf.output.symbolOnLeft.length),
    );
  },
);

В этой статье мы рассмотрели три различных метода форматирования валюты во Flutter TextFields. Первый метод использует пакет intl, предлагающий мощные инструменты локализации и интернационализации. Второй метод демонстрирует пользовательскую функцию форматирования, обеспечивающую гибкость и контроль над форматом валюты. Наконец, третий метод представил пакет flutter_money_formatter, который упрощает форматирование валюты с помощью интуитивно понятного API. Используя эти методы, вы можете улучшить свои приложения Flutter, представляя значения валют в удобном и знакомом формате.