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

Метод 1: использование TextInputType.number
Самый простой способ обеспечить ввод числовых значений — установить для свойства keyboardTypeTextFormField значение TextInputType.number. Когда поле получит фокус, автоматически отобразится цифровая клавиатура, что позволит пользователям легко вводить цифры.

TextFormField(
  keyboardType: TextInputType.number,
  // Additional properties and validation logic
)

Метод 2: проверка ввода
Хотя цифровая клавиатура ограничивает ввод цифр, это не мешает пользователям вводить другие символы. Чтобы гарантировать, что принимаются только действительные числа, вы можете добавить проверку ввода с помощью регулярных выражений или пользовательских валидаторов.

TextFormField(
  keyboardType: TextInputType.number,
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a number.';
    }
    final numericRegex = r'^-?[0-9]+$';
    if (!RegExp(numericRegex).hasMatch(value)) {
      return 'Invalid number format.';
    }
    return null;
  },
  // Additional properties
)

Метод 3: форматирование ввода
Чтобы улучшить взаимодействие с пользователем, вы можете отформатировать числовой ввод так, как его вводит пользователь, добавив разделители или десятичные точки. Свойство inputFormattersTextFormField позволяет определять собственные средства форматирования.

TextFormField(
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    // Additional formatters for currency or decimal formatting
  ],
  // Additional properties
)

Метод 4: пользовательская цифровая клавиатура
В некоторых случаях вам может понадобиться специальная цифровая клавиатура с дополнительными кнопками или настраиваемыми раскладками. Flutter предоставляет свойство keyboardTypeдля создания пользовательских клавиатур с использованием класса InputType. Вы можете определить свой собственный виджет цифровой клавиатуры и установить его как keyboardTypeдля TextFormField.

TextFormField(
  keyboardType: const CustomNumberKeyboard(),
  // Additional properties and validation logic
)

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