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

Метод 1: использование свойства «hoverColor».
IconButton предоставляет свойство «hoverColor», которое позволяет вам определить цвет кнопки при наведении на нее курсора. Установив для этого свойства значение прозрачности, вы можете эффективно убрать эффект наведения.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
  hoverColor: Colors.transparent,
),

Метод 2: использование свойства HighlightColor
Другой подход заключается в использовании свойства HighlightColor объекта IconButton. Это свойство определяет цвет кнопки при ее нажатии или наведении курсора. Как и в предыдущем методе, установка для этого свойства значения «прозрачный» приведет к удалению эффекта наведения.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
  highlightColor: Colors.transparent,
),

Метод 3: настройка IconButton с помощью виджета «Чернила».
Виджет «Чернила» позволяет создавать собственные визуальные эффекты для кнопок, включая удаление эффекта наведения. Вы можете обернуть IconButton в виджет Ink и установить для свойства hoverColor виджета Ink значение прозрачное.

Ink(
  decoration: ShapeDecoration(
    color: Colors.transparent,
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.favorite),
    onPressed: () {},
  ),
),

Метод 4. Создание пользовательского виджета IconButton
Если вам часто требуется IconButton без эффектов наведения, вы можете создать собственный виджет, который инкапсулирует желаемое поведение. Расширив виджет IconButton, вы можете переопределить поведение эффекта наведения по умолчанию и предоставить IconButton без наведения.

class HoverlessIconButton extends IconButton {
  HoverlessIconButton({
    required IconData icon,
    required VoidCallback onPressed,
  }) : super(
          icon: Icon(icon),
          onPressed: onPressed,
          hoverColor: Colors.transparent,
        );
}
// Usage
HoverlessIconButton(
  icon: Icons.favorite,
  onPressed: () {},
),

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