Текстовый виджет Flutter: как ограничить максимальную длину и скрыть счетчик?

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

Метод 1: использование TextEditingController
Первый метод предполагает использование TextEditingController с виджетом TextField. Мы можем установить свойство maxLength TextField и скрыть счетчик, не отображая его.

TextEditingController _textEditingController = TextEditingController();
TextField(
  maxLength: 10,
  controller: _textEditingController,
  decoration: InputDecoration(
    counterText: '', // Hides the counter
  ),
)

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

class MaxLengthFormatter extends TextInputFormatter {
  final int maxLength;
  MaxLengthFormatter(this.maxLength);
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length > maxLength) {
      return oldValue; // Prevents entering more than maxLength characters
    }
    return newValue;
  }
}
TextField(
  inputFormatters: [MaxLengthFormatter(10)],
  decoration: InputDecoration(
    counterText: '', // Hides the counter
  ),
)

Метод 3: использование текста с маской Flutter
Текст с маской Flutter — это библиотека, которая предоставляет различные маски ввода текста. Мы можем использовать его, чтобы установить максимальную длину и скрыть счетчик.

var maskedController = MaskedTextController(mask: 'XXXXXXXXXX');
TextField(
  controller: maskedController,
  decoration: InputDecoration(
    counterText: '', // Hides the counter
  ),
)

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