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

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

TextFormField(
  decoration: InputDecoration(
    border: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
)

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

MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.blue),
      ),
    ),
  ),
  home: MyHomePage(),
)

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

class CustomTextField extends TextFormField {
  @override
  Widget build(BuildContext context) {
    return super.build(context);
  }
  @override
  InputDecoration get decoration => super.decoration.copyWith(
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.green),
        ),
      );
}

Метод 4: использование узла фокуса
Вы можете использовать FocusNodeдля отслеживания состояния фокуса поля текстовой формы. Прикрепив прослушиватель к узлу фокуса, вы можете изменить цвет подчеркивания, когда поле получает или теряет фокус. Вот пример:

FocusNode _focusNode = FocusNode();
TextFormField(
  focusNode: _focusNode,
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: _focusNode.hasFocus ? Colors.yellow : Colors.grey),
    ),
  ),
)

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

TextEditingController _controller = TextEditingController();
Color _underlineColor = Colors.grey;
TextFormField(
  controller: _controller,
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: _underlineColor),
    ),
  ),
  onChanged: (value) {
    setState(() {
      _underlineColor = value.isEmpty ? Colors.red : Colors.green;
    });
  },
)

Метод 6: перенос с помощью контейнера
Вы можете обернуть поле текстовой формы виджетом Containerи применить собственный цвет к его свойству decoration. Этот метод обеспечивает гибкость в настройке цвета подчеркивания и других визуальных аспектов. Вот пример:

Container(
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(color: Colors.orange),
    ),
  ),
  child: TextFormField(),
)

Метод 7. Использование другой библиотеки или пакета.
Наконец, если ни один из вышеперечисленных методов не соответствует вашим требованиям, вы можете изучить сторонние библиотеки или пакеты, которые предлагают более широкие возможности настройки полей текстовых форм. Некоторые популярные варианты включают пакеты «flutter_form_builder» и «flutter_masked_text».

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