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

Метод 1: использование виджета InputDecoration
Один простой подход — использовать виджет InputDecoration и установить для свойства подчеркивания значение Container(). Это эффективно скрывает подчеркивание. Вот пример:

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your text',
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.transparent),
    ),
  ),
)

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

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your text',
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.transparent),
    ),
  ),
)

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

class CustomTextFormField extends TextFormField {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
// Usage
CustomTextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your text',
  ),
)

Метод 4. Обертывание TextFormField с помощью контейнера.
Другой простой метод — обернуть виджет TextFormField контейнером и установить прозрачный цвет контейнера. Этот подход эффективно скрывает подчеркивание. Вот пример:

Container(
  color: Colors.transparent,
  child: TextFormField(
    decoration: InputDecoration(
      labelText: 'Enter your text',
    ),
  ),
)

Метод 5: использование пользовательского InputBorder
Вы можете создать собственный класс InputBorder и переопределить метод paint, чтобы нарисовать пустое подчеркивание. Такой подход позволяет полностью скрыть подчеркивание. Вот пример:

class CustomInputBorder extends UnderlineInputBorder {
  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection textDirection,
  }) {
    // Do nothing to hide the underline
  }
}
// Usage
TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your text',
    enabledBorder: CustomInputBorder(),
  ),
)

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