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

Метод 1: использование класса UnderlineInputBorder
Самый простой способ изменить цвет нижней границы TextField — использовать класс UnderlineInputBorder. Вот пример:

TextField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.red), // Specify your desired color here
    ),
  ),
)

Метод 2: использование класса OutlineInputBorder
Если вам нужен больший контроль над внешним видом границы, вы можете использовать класс OutlineInputBorder. Он позволяет вам определить ширину, цвет и радиус границы. Вот пример:

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0), // Customize the border radius
      borderSide: BorderSide(color: Colors.blue), // Specify your desired color here
    ),
  ),
)

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

class CustomTextField extends TextField {
  CustomTextField({
    Key key,
    BoxDecoration decoration,
    // Add any additional parameters you need
  }) : super(
          key: key,
          decoration: InputDecoration(
            border: InputBorder.none,
            contentPadding: EdgeInsets.zero,
            prefixIcon: decoration != null
                ? Container(
                    decoration: decoration,
                    height: 20.0, // Customize the height of the border
                    width: 2.0, // Customize the width of the border
                  )
                : null,
          ),
        );
}
// Usage:
CustomTextField(
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(color: Colors.green), // Specify your desired color here
    ),
  ),
)

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