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

Метод 1: использование регулярных выражений
Регулярные выражения предоставляют мощный способ проверки числовых полей во Flutter. Допустим, у нас есть TextFormField с именем numberField:

TextFormField(
  controller: numberFieldController,
  decoration: InputDecoration(
    labelText: 'Enter a number',
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a number';
    }
    final regex = r'^[0-9]+$'; // Only allow digits
    if (!RegExp(regex).hasMatch(value)) {
      return 'Please enter a valid number';
    }
    return null; // Validation passed
  },
)

.

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

TextFormField(
  controller: numberFieldController,
  decoration: InputDecoration(
    labelText: 'Enter a number',
  ),
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
  ],
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a number';
    }
    return null; // Validation passed
  },
)

Метод 3: обработка проверки с помощью Focus и FocusNode
Мы можем улучшить взаимодействие с пользователем, проверяя числовое поле при изменении фокуса. Этот подход позволяет получать обратную связь о проверке в режиме реального времени:

final numberFocusNode = FocusNode();
TextFormField(
  controller: numberFieldController,
  focusNode: numberFocusNode,
  decoration: InputDecoration(
    labelText: 'Enter a number',
  ),
  keyboardType: TextInputType.number,
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a number';
    }
    final regex = r'^[0-9]+$';
    if (!RegExp(regex).hasMatch(value)) {
      return 'Please enter a valid number';
    }
    return null; // Validation passed
  },
  onChanged: (value) {
    if (numberFocusNode.hasFocus) {
      Form.of(context).validate();
    }
  },
)

Метод 4: использование пользовательской функции проверки
Для более сложных сценариев проверки мы можем определить пользовательскую функцию проверки:

String validateNumber(String value) {
  if (value.isEmpty) {
    return 'Please enter a number';
  }
  final regex = r'^[0-9]+$';
  if (!RegExp(regex).hasMatch(value)) {
    return 'Please enter a valid number';
  }
  return null; // Validation passed
}
TextFormField(
  controller: numberFieldController,
  decoration: InputDecoration(
    labelText: 'Enter a number',
  ),
  validator: validateNumber,
)

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

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