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

Метод 1: использование свойства labelText
Самый простой способ изменить цвет метки — использовать свойство labelText виджета TextField. Установив атрибут стиля InputDecoration, вы можете изменить цвет текста метки. Вот пример:

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    labelStyle: TextStyle(
      color: Colors.blue, // Change the label color here
    ),
  ),
)

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

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue, // Change the primary color here
  ),
  home: TextField(
    decoration: InputDecoration(
      labelText: 'Username',
    ),
  ),
)

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

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    labelStyle: TextStyle(
      color: Colors.blue, // Change the label color here
      fontSize: 16, // Adjust the font size if needed
    ),
  ),
)

Метод 4. Условные цвета меток.
Иногда может потребоваться динамическое изменение цвета метки в зависимости от определенных условий. В таких случаях вы можете использовать тернарный оператор или условный оператор, чтобы установить свойство цвета в labelStyle. Вот пример:

bool isFocused = false; // Example condition
TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    labelStyle: TextStyle(
      color: isFocused ? Colors.blue : Colors.black, // Change the label color conditionally
    ),
  ),
  onTap: () {
    setState(() {
      isFocused = true; // Update the condition on tap
    });
  },
)

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