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

1. Использование TextInputType.number:
   Самый простой способ ограничить TextField числовым вводом — использовать свойство TextInputType.number. При установке этого свойства экранная клавиатура автоматически переключится на числовую раскладку, что позволит пользователям вводить только цифры. Вот пример:

TextField(
  keyboardType: TextInputType.number,
  // Other properties and styling
)

1. InputFormatters:
   Flutter предоставляет класс InputFormatter, который позволяет вам определять пользовательские ограничения ввода и логику форматирования. Используя комбинацию средств форматирования ввода, вы можете применить ограничение только на число. Вот пример, который допускает только положительные целые числа:

TextField(
  inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
  ],
  // Other properties and styling
)

1. FilteringTextInputFormatter.digitsOnly:
   Для еще более простого решения Flutter предоставляет встроенный форматировщик ввода под названием FilteringTextInputFormatter.digitsOnly. Этот форматтер ограничивает ввод только цифрами (0–9). Вот пример:

TextField(
  inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly,
  ],
  // Other properties and styling
)

1. Регулярные выражения (RegExp):
   Если вам нужны более сложные ограничения, например десятичные числа или отрицательные значения, вы можете использовать регулярные выражения (RegExp) для проверки и фильтрации входных данных. Вот пример, который допускает как положительные, так и отрицательные десятичные числа:

TextField(
  inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.allow(RegExp(r'^-?[0-9]*\.?[0-9]*$')),
  ],
  // Other properties and styling
)

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

String numericValue = '';
TextField(
  onChanged: (value) {
    final numericOnly = value.replaceAll(RegExp(r'[^0-9]'), '');
    if (numericOnly != value) {
      // Update the TextField value
      numericValue = numericOnly;
      // Set the new value in the TextField
      // This prevents the caret position from changing unexpectedly
      // You can also use a TextEditingController for this purpose
      // controller.text = numericOnly;
    }
  },
  // value: numericValue,
  // Other properties and styling
)

В этой статье мы рассмотрели пять различных методов создания текстового поля, состоящего только из чисел, во Flutter. Используя свойство TextInputType.number, InputFormatters, FilteringTextInputFormatter.digitsOnly, регулярные выражения или настраиваемый прослушиватель ввода, вы можете легко ограничить ввод пользователя числовыми значениями. Выберите метод, который лучше всего соответствует вашим требованиям и обеспечивает наиболее интуитивно понятный пользовательский интерфейс вашего приложения.

Реализуя эти методы, вы можете быть уверены, что ваше приложение Flutter корректно обрабатывает числовой ввод, уменьшая количество ошибок и улучшая общее взаимодействие с пользователем.