🧩IconButton()

Что такое IconButton

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

Пример использования

Вот пример того, как можно использовать IconButton в приложении Flutter:

import 'package:flutter/material.dart';

class IconButtonExample extends StatelessWidget {
  const IconButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('IconButton Example')),
      body: Center(
        child: IconButton(
          icon: const Icon(Icons.favorite), // Иконка
          tooltip: 'Favorite', // Подсказка при наведении
          onPressed: () {
            // Действие при нажатии
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Favorite clicked!')),
            );
          },
        ),
      ),
    );
  }
}

Как работает код

  1. IconButton: Основной виджет кнопки, отображающий иконку.

  2. icon: Определяет, какую иконку будет отображать кнопка. В примере мы используем иконку сердечка.

  3. onPressed: Функция, которая будет вызвана, когда кнопка будет нажата. Здесь мы показываем уведомление.

  4. tooltip: Текст, который будет отображаться, когда пользователь наведёт курсор на кнопку.

Зачем это нужно

IconButton удобно использовать, когда вы хотите создать интуитивно понятные действия, которые не требуют текста. Это помогает сократить место на экране и позволяет пользователю быстро понять, что означает каждая кнопка, исходя из её иконки. Применяется в случаях, когда важна компактность интерфейса, например:

  • В строках инструментов.

  • В меню навигации.

  • В качестве действий в карточках и списках.

Все настройки IconButton

  1. double? iconSize

    • Описание: Размер иконки. Если не указан, используется значение по умолчанию.

    • Пример:

      iconSize: 30.0 // Установка размера иконки

  2. VisualDensity? visualDensity

    • Описание: Определяет плотность визуальных элементов. Может использоваться для настройки расстояния между элементами.

    • Пример:

      visualDensity: VisualDensity(horizontal: 0, vertical: -2) // Плотность визуальных элементов

  3. EdgeInsetsGeometry? padding

    • Описание: Отступы вокруг иконки внутри кнопки. Позволяет настроить пространство вокруг иконки.

    • Пример:

      padding: EdgeInsets.all(10.0) // Отступы вокруг иконки

  4. AlignmentGeometry? alignment

    • Описание: Определяет выравнивание иконки внутри кнопки. Полезно, если вы хотите изменить позицию иконки.

    • Пример:

      alignment: Alignment.center // Центрирование иконки

  5. double? splashRadius

    • Описание: Радиус эффекта всплеска при нажатии. Определяет, насколько далеко будет распространяться эффект при нажатии.

    • Пример:

      splashRadius: 20.0 // Установка радиуса всплеска

  6. Color? color

    • Описание: Цвет иконки. Позволяет изменить цвет в зависимости от состояния.

    • Пример:

      color: Colors.red // Установка цвета иконки

  7. Color? focusColor

    • Описание: Цвет, который будет использоваться, когда кнопка в фокусе.

    • Пример:

      focusColor: Colors.blue // Цвет при фокусе

  8. Color? hoverColor

    • Описание: Цвет, который будет использоваться, когда пользователь наводит курсор на кнопку.

    • Пример:

      hoverColor: Colors.green // Цвет при наведении

  9. Color? highlightColor

    • Описание: Цвет, который будет использоваться при нажатии на кнопку.

    • Пример:

      highlightColor: Colors.yellow // Цвет при нажатии

  10. Color? splashColor

    • Описание: Цвет эффекта всплеска при нажатии на кнопку.

    • Пример:

      splashColor: Colors.blueAccent // Цвет всплеска

  11. Color? disabledColor

    • Описание: Цвет, который будет использоваться, когда кнопка отключена.

    • Пример:

      disabledColor: Colors.grey // Цвет для отключённого состояния

  12. required void Function()? onPressed

    • Описание: Функция, которая будет вызвана при нажатии на кнопку. Обязательный параметр.

    • Пример:

      onPressed: () {
  print('IconButton Pressed'); // Действие при нажатии
}

  13. MouseCursor? mouseCursor

    • Описание: Курсор мыши, который будет отображаться, когда пользователь наводит курсор на кнопку.

    • Пример:

      mouseCursor: SystemMouseCursors.click // Курсор при наведении

  14. FocusNode? focusNode

    • Описание: Указывает на узел фокуса для управления фокусом этой кнопки.

    • Пример:

      focusNode: FocusNode() // Указатель на узел фокуса

  15. bool autofocus = false

    • Описание: Если true, кнопка автоматически получит фокус при загрузке.

    • Пример:

      autofocus: true // Автофокус при загрузке

  16. String? tooltip

    • Описание: Текст подсказки, который будет отображаться при наведении на кнопку.

    • Пример:

      tooltip: 'Click me' // Подсказка при наведении

  17. bool? enableFeedback

    • Описание: Указывает, нужно ли предоставлять тактильную обратную связь при нажатии.

    • Пример:

      enableFeedback: true // Включение тактильной обратной связи

  18. BoxConstraints? constraints

    • Описание: Ограничения для размера кнопки. Позволяет задать максимальные и минимальные размеры.

    • Пример:

      constraints: BoxConstraints(maxWidth: 100, maxHeight: 100) // Ограничения по размеру

  19. ButtonStyle? style

    • Описание: Стиль кнопки, который позволяет настраивать её внешний вид.

    • Пример:

      style: IconButton.styleFrom(
  backgroundColor: Colors.blue // Установка фона кнопки
)

  20. bool? isSelected

    • Описание: Указывает, выбрана ли кнопка. Используется для визуального изменения состояния.

    • Пример:

      isSelected: true // Установка состояния выбора

  21. Widget? selectedIcon

    • Описание: Иконка, которая будет отображаться, когда кнопка выбрана.

    • Пример:

      selectedIcon: Icon(Icons.favorite) // Иконка для выбранного состояния

  22. required Widget icon

    • Описание: Обязательный параметр, который указывает, какую иконку будет отображать кнопка.

    • Пример:

      icon: Icon(Icons.favorite) // Установка иконки

Заключение

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

PreviousElevatedButton()NextDropDownButton()

Last updated