🧩Hero

Что такое Hero

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

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

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

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 элементы между двумя экранами.

   • Пример:

     tag: 'uniqueHeroTag'

   • Применение: Без этого тега анимация не сработает. Теги должны совпадать на обоих экранах.

2. child

   • Описание: Виджет, который будет анимирован при переходе.

   • Пример:

     child: Image.asset('assets/my_image.png')

   • Применение: Это элемент, который перемещается между экранами.

3. flightShuttleBuilder

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

   • Пример:

     flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
       return Icon(Icons.star, size: 100);
     }

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

4. placeholderBuilder

   • Описание: Функция, возвращающая виджет-заполнитель для Hero на экране, пока выполняется переход.

   • Пример:

     placeholderBuilder: (context, size, child) {
       return Container(color: Colors.grey);
     }

   • Применение: Показывает элемент-заполнитель, пока основной виджет еще не появился на экране.

5. transitionOnUserGestures

   • Описание: Позволяет использовать анимацию Hero, когда пользователь вручную перетаскивает экран (например, свайпом назад на iOS).

   • Пример:

     transitionOnUserGestures: true

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

Итог

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