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

Метод 1: использование свойства prefixIcon
Самый простой способ изменить цвет значка префикса — использовать свойство prefixIconвиджета TextField. Вы можете обернуть виджет Iconвиджетом ColorFiltered, чтобы применить цветовой фильтр. Вот пример:

TextField(
  prefixIcon: ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
    child: Icon(Icons.search),
  ),
)

Метод 2. Создание пользовательского виджета TextField
Если у вас есть несколько TextField с одинаковыми настройками цвета, создание пользовательского виджета TextField может быть более эффективным. Вот пример того, как создать собственный виджет:

class CustomTextField extends StatelessWidget {
  final IconData prefixIcon;
  final Color prefixIconColor;
  const CustomTextField({
    Key? key,
    required this.prefixIcon,
    required this.prefixIconColor,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return TextField(
      prefixIcon: ColorFiltered(
        colorFilter: ColorFilter.mode(prefixIconColor, BlendMode.srcIn),
        child: Icon(prefixIcon),
      ),
    );
  }
}
// Usage
CustomTextField(
  prefixIcon: Icons.search,
  prefixIconColor: Colors.blue,
)

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

Theme(
  data: ThemeData(
    primaryColor: Colors.blue,
    primaryIconTheme: IconThemeData(
      color: Colors.blue,
    ),
  ),
  child: TextField(
    prefixIcon: Icon(Icons.search),
  ),
)

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

TextFormField(
  decoration: InputDecoration(
    prefixIcon: ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
      child: Icon(Icons.search),
    ),
  ),
)

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