🧩Icon()

Что такое Icon?

Icon — это простой элемент, который используется для отображения маленького изображения или символа, например, стрелки, звезды или корзины. Иконка в приложении помогает пользователю понять, что делает кнопка или какое значение отображается, благодаря узнаваемым символам.

Аналогия: Представьте, что вы находитесь в большом торговом центре. На указателях вы видите маленькие изображения, например, нож и вилка (для кафе), корзина (для магазина) или стрелка (для направления). Эти иконки сразу подсказывают вам, куда идти, не нужно читать длинные описания. Icon в приложении работает точно так же.

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

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Icon(
          Icons.favorite,
          color: Colors.red,
          size: 50,
        ),
      ),
    );
  }
}

В этом примере мы добавляем иконку favorite, задаем ей размер и цвет.

Настройки Icon с простыми пояснениями и примерами

1. Key? key

Описание: Уникальный ключ для идентификации этого виджета в иерархии. Может быть полезен для анимаций или при перестроении элементов интерфейса. Пример:

key: Key('star_icon') // Уникальный ключ для иконки

2. double? size

Описание: Задает размер иконки в пикселях. Пример:

size: 30.0 // Иконка будет размером 30 пикселей

3. double? fill

Описание: Позволяет изменять заполнение иконки. Работает не со всеми иконками. Пример:

fill: 0.5 // Заполнение иконки на половину

4. double? weight

Описание: Определяет толщину линий иконки. Пример:

weight: 2.0 // Иконка будет более толстой

5. double? grade

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

grade: 1.5 // Увеличенная толщина линий

6. double? opticalSize

Описание: Настраивает размер иконки с учетом ее контекста и расположения. Может варьировать масштаб для улучшения читаемости. Пример:

opticalSize: 40.0 // Подгоняет размер иконки под оптическое восприятие

7. Color? color

Описание: Задает цвет иконки. Пример:

color: Colors.blue // Синяя иконка

8. List<Shadow>? shadows

Описание: Добавляет тени к иконке, чтобы она выделялась или создавала эффект объема. Пример:

shadows: [Shadow(color: Colors.black, offset: Offset(2, 2), blurRadius: 4.0)] // Черная тень

9. String? semanticLabel

Описание: Текстовая подпись для иконки, используемая для доступности, чтобы экранные чтецы могли озвучивать значение иконки. Пример:

semanticLabel: 'Звезда' // Чтец озвучит "Звезда"

10. TextDirection? textDirection

Описание: Направление текста и расположение иконки (слева направо или справа налево). Пример:

textDirection: TextDirection.rtl // Иконка будет направлена справа налево

11. bool? applyTextScaling

Описание: Позволяет масштабировать иконку в зависимости от настроек текста в системе. Пример:

applyTextScaling: true // Иконка масштабируется при увеличении размера текста

Итог

Icon — это маленькое изображение, которое сразу передает смысл кнопки или раздела, помогает пользователям быстрее ориентироваться и добавляет визуальную структуру. Все настройки позволяют настраивать иконку под стиль и нужды приложения.

PreviousAppBar()NextStepper()

Last updated