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

Метод 1: использование Stateful Widget и StatefulWidget:
Самый простой подход — использовать StatefulWidget и управлять изменением цвета в его состоянии. Вот пример:

class ColorChangingIconButton extends StatefulWidget {
  @override
  _ColorChangingIconButtonState createState() => _ColorChangingIconButtonState();
}
class _ColorChangingIconButtonState extends State<ColorChangingIconButton> {
  Color iconColor = Colors.blue; // Initial color
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.favorite),
      color: iconColor,
      onPressed: () {
        setState(() {
          iconColor = Colors.red; // New color when pressed
        });
      },
    );
  }
}

Метод 2. Использование AnimatedContainer.
Другой подход заключается в использовании виджета AnimatedContainer для анимации изменения цвета при нажатии кнопки IconButton. Вот пример:

class AnimatedColorIconButton extends StatefulWidget {
  @override
  _AnimatedColorIconButtonState createState() => _AnimatedColorIconButtonState();
}
class _AnimatedColorIconButtonState extends State<AnimatedColorIconButton> {
  Color iconColor = Colors.blue; // Initial color
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          iconColor = Colors.red; // New color when pressed
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        color: iconColor,
        child: IconButton(
          icon: Icon(Icons.favorite),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    );
  }
}

Метод 3. Использование InkWell и InkResponse.
Виджеты InkWell и InkResponse обеспечивают встроенную поддержку обработки событий касания и визуальной обратной связи. Вот пример:

class InkWellIconButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        // Handle onPressed logic here
      },
      child: InkResponse(
        onTap: () {},
        highlightColor: Colors.red, // Color when pressed
        containedInkWell: true,
        child: IconButton(
          icon: Icon(Icons.favorite),
          color: Colors.blue,
          onPressed: () {},
        ),
      ),
    );
  }
}

Реализуя один из этих методов, вы можете легко изменить цвет IconButton при его нажатии во Flutter. Предпочитаете ли вы управлять состоянием, анимировать изменение цвета или использовать встроенные виджеты, для вас найдется решение.