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

Метод 1: использование Container и BoxDecoration
Один из способов добиться эффекта тени в фокусе — обернуть поле ввода внутри контейнера и применить BoxDecoration. BoxDecoration позволяет нам устанавливать такие свойства, как цвет, форма и тень. Мы можем динамически обновлять свойства тени, когда поле ввода получает фокус.

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        blurRadius: isFocused ? 5.0 : 0.0, // Adjust the blur radius based on focus
        spreadRadius: isFocused ? 2.0 : 0.0, // Adjust the spread radius based on focus
        offset: Offset(0, 3), // Adjust the offset based on focus
      ),
    ],
  ),
  child: TextField(
    // TextField properties
    onChanged: (value) {
      // Update the focus state
      setState(() {
        isFocused = value.isNotEmpty;
      });
    },
  ),
)

Метод 2: использование FocusNode и FocusListener
Другой подход — использовать классы FocusNode и FocusListener, предоставляемые Flutter. FocusNode представляет собой узел в иерархии фокусов, а FocusListener позволяет нам прослушивать изменения фокуса и соответствующим образом обновлять тень.

FocusNode _focusNode = FocusNode();
...
Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        blurRadius: _focusNode.hasFocus ? 5.0 : 0.0, // Adjust the blur radius based on focus
        spreadRadius: _focusNode.hasFocus ? 2.0 : 0.0, // Adjust the spread radius based on focus
        offset: Offset(0, 3), // Adjust the offset based on focus
      ),
    ],
  ),
  child: TextField(
    focusNode: _focusNode,
    // TextField properties
  ),
)

Метод 3: использование AnimatedContainer
Виджет AnimatedContainer можно использовать для создания плавного перехода при применении эффекта тени к фокусу. Анимируя свойства AnimatedContainer, мы можем добиться более визуально привлекательного эффекта.

AnimatedContainer(
  duration: Duration(milliseconds: 200), // Adjust the duration as needed
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        blurRadius: isFocused ? 5.0 : 0.0, // Adjust the blur radius based on focus
        spreadRadius: isFocused ? 2.0 : 0.0, // Adjust the spread radius based on focus
        offset: Offset(0, 3), // Adjust the offset based on focus
      ),
    ],
  ),
  child: TextField(
    // TextField properties
    onChanged: (value) {
      // Update the focus state
      setState(() {
        isFocused = value.isNotEmpty;
      });
    },
  ),
)

В этой статье мы рассмотрели различные методы добавления эффекта тени к выделенным полям ввода во Flutter. Мы обсудили использование Container и BoxDecoration, FocusNode и FocusListener, а также AnimatedContainer. Каждый метод предлагает уникальный способ достижения желаемого визуального эффекта. Реализуя эти методы, вы можете улучшить взаимодействие с пользователем и создать более привлекательные пользовательские интерфейсы в своих приложениях Flutter.

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