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

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

TextField(
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,1}')),
  ],
)

В этом примере шаблон RegExpr'^\d+\.?\d{0,1}'допускает только один или два десятичных знака после числа. Вы можете изменить шаблон в соответствии с вашими требованиями.

Метод 2: TextEditingController
Другой подход — использовать TextEditingController, который дает нам больше контроля над значением текстового поля. Мы можем добавить прослушиватель к контроллеру и проверять ввод при каждом изменении текста. Вот пример:

TextEditingController _controller = TextEditingController();
@override
void initState() {
  super.initState();
  _controller.addListener(() {
    if (_controller.text.isNotEmpty) {
      int number = int.tryParse(_controller.text);
      if (number == null) {
        _controller.clear();
      }
    }
  });
}
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
// Inside the build method:
TextField(
  keyboardType: TextInputType.number,
  controller: _controller,
)

В этом примере метод addListenerиспользуется для добавления обратного вызова, который проверяет, можно ли преобразовать введенный текст в допустимое число. Если нет, текстовое поле очищается.

Метод 3: Flutter Masked Text
Пакет Flutter Masked Text предоставляет удобный способ определения масок ввода для текстовых полей. Мы можем использовать его для создания маски, допускающей только одно число. Вот пример:

var maskFormatter = new MaskTextInputFormatter(
  mask: '9',
  filter: {"9": RegExp(r'[0-9]')},
);
TextField(
  keyboardType: TextInputType.number,
  inputFormatters: [maskFormatter],
)

В этом примере маска '9'допускает ввод только одной цифры. Вы можете настроить маску в соответствии со своими потребностями.

Ограничить текстовое поле приемом только одного числа во Flutter можно различными способами. В этой статье мы рассмотрели три подхода: проверка регулярных выражений, TextEditingControllerи пакет Flutter Masked Text. В зависимости от ваших конкретных требований вы можете выбрать наиболее подходящий метод для вашего проекта Flutter.

Не забывайте учитывать пользовательский опыт при внедрении ограничений на ввод и предоставляйте пользователям четкую обратную связь, если вводимые ими данные не соответствуют требованиям. Приятного кодирования!