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

Метод 1: использование inputFormatters
Один из способов ограничить ввод пользователем чисел в TextField — использовать свойство inputFormatters. Это свойство позволяет указать массив средств форматирования ввода, которые могут изменять текст, введенный пользователем. Мы можем использовать класс FilteringTextInputFormatter, чтобы ограничить ввод только цифровыми символами. Вот пример:

TextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
)

Метод 2: установка свойства KeyboardType
Свойство KeyboardType виджета TextField позволяет указать тип клавиатуры, которая должна отображаться пользователю. Установив для него значение TextInputType.number, вы можете гарантировать, что будет отображаться только цифровая клавиатура, что усложнит ввод нечисловых символов пользователям. Вот пример:

TextField(
  keyboardType: TextInputType.number,
)

Метод 3: реализация настраиваемого средства проверки ввода.
Вы также можете создать настраиваемое средство проверки ввода, чтобы проверять вводимые пользователем данные и разрешать только числовые значения. Этот метод дает вам больше гибкости при выполнении конкретных требований проверки. Вот пример:

TextField(
  onChanged: (value) {
    if (value.isNotEmpty && double.tryParse(value) == null) {
      // Display an error message or perform some action
    }
  },
)

Метод 4. Использование регулярных выражений (регулярных выражений)
Регулярные выражения предоставляют мощные возможности сопоставления с образцом, что делает их полезными для проверки ввода данных пользователем. Вы можете использовать регулярное выражение, чтобы ограничить ввод только числами. Вот пример:

TextField(
  onChanged: (value) {
    if (value.isNotEmpty && !RegExp(r'^[0-9]+$').hasMatch(value)) {
      // Display an error message or perform some action
    }
  },
)

Метод 5. Фильтрация ввода с помощью TextEditingController
Другой подход заключается в использовании TextEditingController для управления вводом текста и фильтрации нечисловых символов. Вот пример:

final numberController = TextEditingController();
TextField(
  controller: numberController,
  onChanged: (value) {
    final newValue = value.replaceAll(RegExp(r'[^0-9]'), '');
    if (value != newValue) {
      numberController.text = newValue;
      numberController.selection = TextSelection.fromPosition(
        TextPosition(offset: newValue.length),
      );
    }
  },
)

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