🧩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 — это виджет для создания впечатляющих анимационных переходов между экранами с минимальной настройкой. Он делает переходы между экранами более естественными и привлекательными для пользователя, добавляя глубину и визуальный интерес к вашему приложению.

Last updated