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

Метод 1: использование свойства «decoration».
Виджет TextFormField предоставляет свойство «decoration», которое позволяет нам определять внешний вид поля ввода. Мы можем использовать класс UnderlineInputBorder для создания подчеркивания определенного цвета. Вот пример:

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

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

Theme(
  data: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.green),
      ),
    ),
  ),
  child: TextFormField(
    decoration: InputDecoration(
      labelText: 'Enter your text',
    ),
  ),
)

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

class CustomTextFormField extends TextFormField {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        labelText: 'Enter your text',
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
      ),
    );
  }
}
// Usage:
CustomTextFormField(),

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