Для чего нужен icon?

Для чего нужен Icon?

Icon — это встроенный в Flutter виджет, который отображает иконки из набора Material Design icons. Это один из самых часто используемых элементов UI, который добавляет визуальную ясность и улучшает пользовательский интерфейс.

Что такое Icon?

Icon — это небольшое изображение (обычно 24x24 пикселей), которое:

1. Представляет действие или концепцию
2. Занимает минимум места
3. Быстро узнается пользователем
4. Улучшает UX

Icon предоставляет:
✓ Визуальное представление функции
✓ Быстрое опознавание
✓ Экономию места
✓ Универсальный язык (не зависит от языка)

Базовый пример

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Icons Demo')),
      body: Center(
        child: Icon(
          Icons.favorite,  // Иконка
          color: Colors.red,
          size: 48,
        ),
      ),
    );
  }
}

Основные параметры Icon

Icon(
  Icons.star,           // Какая иконка
  size: 32,             // Размер в пикселях
  color: Colors.yellow, // Цвет
  semanticLabel: 'Star', // Для accessibility
)

Популярные Material Icons

// Действия
Icons.add           // +
Icons.delete        // 🗑️
Icons.edit          // ✏️
Icons.save          // 💾
Icons.search        // 🔍
Icons.settings      // ⚙️

// Навигация
Icons.home          // 🏠
Icons.back          // ←
Icons.menu          // ☰
Icons.close         // ✕

// Состояния
Icons.favorite      // ❤️
Icons.favorite_border // ♡
Icons.checked       // ✓
Icons.radio_button_unchecked

// Системные
Icons.info          // ℹ️
Icons.warning       // ⚠️
Icons.error         // ⚠️

Полный пример: Кнопка с иконкой

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Icon Button')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 1. IconButton
            IconButton(
              icon: Icon(Icons.favorite),
              onPressed: () {
                print('Like pressed');
              },
              color: Colors.red,
              iconSize: 32,
            ),
            
            // 2. FloatingActionButton с иконкой
            FloatingActionButton(
              onPressed: () {},
              child: Icon(Icons.add),
              backgroundColor: Colors.blue,
            ),
            
            // 3. Кнопка с иконкой и текстом
            ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.download),
              label: Text('Download'),
            ),
          ],
        ),
      ),
    );
  }
}

Icon в разных контекстах

1. В AppBar (навигация)

AppBar(
  title: Text('App Title'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {},
    ),
  ],
)

2. В ListTile

ListTile(
  leading: Icon(Icons.mail),
  title: Text('Email'),
  subtitle: Text('user@example.com'),
  trailing: Icon(Icons.arrow_forward),
)

3. В BottomNavigationBar

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
  currentIndex: 0,
  onTap: (index) {},
)

4. С анимацией

class AnimatedIconExample extends StatefulWidget {
  @override
  State<AnimatedIconExample> createState() => _AnimatedIconExampleState();
}

class _AnimatedIconExampleState extends State<AnimatedIconExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 500),
      vsync: this,
    );
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedIcon(
        icon: AnimatedIcons.menu_close, // меню ↔ крестик
        progress: _controller,
        size: 40,
        color: Colors.black,
      ),
    );
  }
}

Пример: Приложение со звездным рейтингом

class StarRating extends StatefulWidget {
  final Function(int) onRatingChanged;
  
  const StarRating({required this.onRatingChanged});
  
  @override
  State<StarRating> createState() => _StarRatingState();
}

class _StarRatingState extends State<StarRating> {
  int _rating = 0;
  
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(
        5,
        (index) => IconButton(
          onPressed: () {
            setState(() {
              _rating = index + 1;
            });
            widget.onRatingChanged(_rating);
          },
          icon: Icon(
            index < _rating ? Icons.star : Icons.star_border,
            color: Colors.amber,
            size: 40,
          ),
        ),
      ),
    );
  }
}

// Использование
class ProductCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Text('Product Name'),
            SizedBox(height: 10),
            StarRating(onRatingChanged: (rating) {
              print('Rating: $rating');
            }),
          ],
        ),
      ),
    );
  }
}

Пример: Статус с иконкой

class StatusIndicator extends StatelessWidget {
  final String status; // online, offline, away, busy
  
  const StatusIndicator({required this.status});
  
  IconData _getIcon() {
    switch (status) {
      case 'online':
        return Icons.check_circle;
      case 'offline':
        return Icons.cancel;
      case 'away':
        return Icons.watch_later;
      case 'busy':
        return Icons.do_not_disturb;
      default:
        return Icons.help;
    }
  }
  
  Color _getColor() {
    switch (status) {
      case 'online':
        return Colors.green;
      case 'offline':
        return Colors.grey;
      case 'away':
        return Colors.orange;
      case 'busy':
        return Colors.red;
      default:
        return Colors.grey;
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(
          _getIcon(),
          color: _getColor(),
          size: 20,
        ),
        SizedBox(width: 8),
        Text(status),
      ],
    );
  }
}

// Использование
StatusIndicator(status: 'online'),
StatusIndicator(status: 'offline'),
StatusIndicator(status: 'away'),

Собственные иконки (Custom Icons)

// Создание собственного набора иконок
class MyIcons {
  static const IconData custom_star = IconData(
    0xe900,
    fontFamily: 'MyIcons',
  );
  
  static const IconData custom_heart = IconData(
    0xe901,
    fontFamily: 'MyIcons',
  );
}

// Использование
Icon(MyIcons.custom_star, size: 30)

Accessibility (доступность)

// Добавляйте semanticLabel для слабовидящих
Icon(
  Icons.favorite,
  semanticLabel: 'Add to favorites',
  size: 32,
  color: Colors.red,
)

// Для IconButton
IconButton(
  icon: Icon(Icons.delete),
  tooltip: 'Delete this item', // Показывается при долгом нажатии
  onPressed: () {},
)

Лучшие практики

1. Используй согласованные размеры

const double _smallIconSize = 16;
const double _normalIconSize = 24;
const double _largeIconSize = 32;
const double _extraLargeIconSize = 48;

Icon(Icons.home, size: _normalIconSize)

2. Согласуй цвета с темой

Icon(
  Icons.favorite,
  color: Theme.of(context).primaryColor,
)

3. Добавляй семантику

IconButton(
  icon: Icon(Icons.favorite_border),
  tooltip: 'Add to favorites',
  semanticLabel: 'Add to favorites',
  onPressed: () {},
)

4. Используй иконки для быстрого опознавания

// ✅ Хорошо - иконка + текст для ясности
Row(
  children: [
    Icon(Icons.phone),
    SizedBox(width: 8),
    Text('+1-234-567-8900'),
  ],
)

// ❌ Плохо - только иконка, непонятно
Icon(Icons.phone)

Когда использовать Icon

✅ Кнопки и действия (edit, delete, save) ✅ Навигация (home, back, menu) ✅ Статусы (online, favorite, checked) ✅ Контакты (phone, email, location) ✅ Рейтинги (stars, hearts) ✅ Уведомления (warning, error, info)

❌ Декорация без смысла — используй Image ❌ Сложные иллюстрации — используй images или SVG ❌ Большие графические элементы — используй Container/Image

Вывод

Icon — это фундаментальный элемент Flutter UI, который:

✓ Улучшает UX через визуальное представление ✓ Экономит пространство ✓ Работает с Material Design ✓ Поддерживает анимацию ✓ Легко кастомизировать (размер, цвет)

Профессиональное приложение активно использует иконки для ясности и привлекательности интерфейса.