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

Метод 1: использование TextInputType.number
Самый простой способ создать поле ввода, состоящее только из чисел, — использовать свойство TextInputType.number. Это свойство можно установить для атрибута keyboardTypeвиджета TextField. Вот пример:

TextField(
  keyboardType: TextInputType.number,
)

Метод 2: использование inputFormatters
Flutter предоставляет свойство inputFormatters, которое позволяет вам определять собственные правила форматирования для поля ввода. Используя это свойство, вы можете ограничить ввод только числовыми значениями. Вот пример:

TextField(
  inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly,
  ],
)

Метод 3. Использование регулярных выражений
Регулярные выражения можно использовать для проверки и ограничения ввода числовыми значениями. Вы можете использовать класс RegExpиз библиотеки dart:core, чтобы определить шаблон регулярного выражения и соответствующим образом проверить ввод. Вот пример:

TextField(
  onChanged: (value) {
    if (!RegExp(r'^[0-9]+$').hasMatch(value)) {
      // Handle invalid input
    }
  },
)

Метод 4: использование обратного вызова onSubmit
Вы можете использовать обратный вызов onSubmittedдля проверки ввода и предотвращения отправки нечисловых значений. Вот пример:

TextField(
  onSubmitted: (value) {
    if (double.tryParse(value) == null) {
      // Handle invalid input
    }
  },
)

Метод 5. Использование пользовательского виджета ввода.
Вы можете создать собственный виджет ввода, который расширяет виджет TextFieldи включает дополнительную логику проверки, позволяющую ограничить ввод только числами. Вот пример:

class NumberInputField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      keyboardType: TextInputType.number,
      inputFormatters: <TextInputFormatter>[
        FilteringTextInputFormatter.digitsOnly,
      ],
    );
  }
}

Метод 6: использование десятичной клавиатуры.
Если вам требуется десятичный ввод, вы можете установить для свойства keyboardTypeзначение TextInputType.numberWithOptions(decimal: true). Это позволит пользователю вводить десятичные значения. Вот пример:

TextField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
)

Метод 7: использование пакета
На pub.dev доступно несколько пакетов, которые предоставляют предварительно созданные поля ввода чисел с дополнительными функциями и возможностями настройки. Одним из популярных пакетов является пакет flutter_masked_text, который позволяет создавать маскированные поля ввода для чисел. Вы можете изучить эти пакеты, чтобы найти тот, который лучше всего соответствует вашим требованиям.

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