# Hero

#### Что такое `Hero`

`Hero` — это виджет, который позволяет создать плавный анимационный переход между экранами при навигации, когда один и тот же элемент (например, изображение, текст, кнопка) встречается на обоих экранах. При переходе из одного экрана в другой элемент будет плавно перемещаться и изменять размеры, создавая эффект "перелета" или "перехода", что делает навигацию более естественной и интерактивной.

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

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

<div align="left"><figure><img src="https://i.postimg.cc/PJtnXzGh/hero-ezgif-com-video-to-gif-converter.gif" alt="" width="188"><figcaption></figcaption></figure></div>

```dart
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen()),
            );
          },
          child: Hero(
            tag: 'imageHero',                 // Пример: уникальный тег, связывающий элемент
            child: Image.network(
              'https://i.postimg.cc/J0DxTkRN/2.png',
              width: 150,
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'imageHero',                  // Пример: уникальный тег на втором экране
          child: Image.network(
            'https://i.postimg.cc/J0DxTkRN/2.png',
            width: 300,
          ),
        ),
      ),
    );
  }
}
```

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

1. **Создание тега `Hero`** — в `FirstScreen` мы оборачиваем изображение в виджет `Hero` и даем ему уникальный `tag` (в нашем примере это `'imageHero'`). Этот же `tag` используется на `SecondScreen`.
2. **Переход между экранами** — при нажатии на изображение на первом экране выполняется переход на второй экран. `Hero` автоматически создает анимацию, которая перемещает изображение из одной позиции в другую, плавно изменяя его размеры.
3. **Уникальный `tag`** — важно, чтобы у обоих виджетов `Hero` (на обоих экранах) был один и тот же `tag`, иначе Flutter не сможет связать их и показать анимацию.

#### Все настройки Hero

1. **tag**
   * **Описание**: Уникальный идентификатор, который связывает `Hero` элементы между двумя экранами.
   *   **Пример**:

       ```dart
       tag: 'uniqueHeroTag'
       ```
   * **Применение**: Без этого тега анимация не сработает. Теги должны совпадать на обоих экранах.
2. **child**
   * **Описание**: Виджет, который будет анимирован при переходе.
   *   **Пример**:

       ```dart
       child: Image.asset('assets/my_image.png')
       ```
   * **Применение**: Это элемент, который перемещается между экранами.
3. **flightShuttleBuilder**
   * **Описание**: Функция, которая позволяет настроить внешний вид `Hero` во время анимации перехода.
   *   **Пример**:

       ```dart
       flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
         return Icon(Icons.star, size: 100);
       }
       ```
   * **Применение**: Позволяет изменить внешний вид анимированного объекта (например, сделать его прозрачным или заменить на другой виджет).
4. **placeholderBuilder**
   * **Описание**: Функция, возвращающая виджет-заполнитель для `Hero` на экране, пока выполняется переход.
   *   **Пример**:

       ```dart
       placeholderBuilder: (context, size, child) {
         return Container(color: Colors.grey);
       }
       ```
   * **Применение**: Показывает элемент-заполнитель, пока основной виджет еще не появился на экране.
5. **transitionOnUserGestures**
   * **Описание**: Позволяет использовать анимацию `Hero`, когда пользователь вручную перетаскивает экран (например, свайпом назад на iOS).
   *   **Пример**:

       ```dart
       transitionOnUserGestures: true
       ```
   * **Применение**: Полезно для устройств с жестами навигации, чтобы позволить анимации работать плавно при свайпе.

#### Итог

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