🧩Hero
Что такое 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,
),
),
),
);
}
}
Как работает код
Создание тега
Hero
— вFirstScreen
мы оборачиваем изображение в виджетHero
и даем ему уникальныйtag
(в нашем примере это'imageHero'
). Этот жеtag
используется наSecondScreen
.Переход между экранами — при нажатии на изображение на первом экране выполняется переход на второй экран.
Hero
автоматически создает анимацию, которая перемещает изображение из одной позиции в другую, плавно изменяя его размеры.Уникальный
tag
— важно, чтобы у обоих виджетовHero
(на обоих экранах) был один и тот жеtag
, иначе Flutter не сможет связать их и показать анимацию.
Все настройки Hero
tag
Описание: Уникальный идентификатор, который связывает
Hero
элементы между двумя экранами.Пример:
tag: 'uniqueHeroTag'
Применение: Без этого тега анимация не сработает. Теги должны совпадать на обоих экранах.
child
Описание: Виджет, который будет анимирован при переходе.
Пример:
child: Image.asset('assets/my_image.png')
Применение: Это элемент, который перемещается между экранами.
flightShuttleBuilder
Описание: Функция, которая позволяет настроить внешний вид
Hero
во время анимации перехода.Пример:
flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) { return Icon(Icons.star, size: 100); }
Применение: Позволяет изменить внешний вид анимированного объекта (например, сделать его прозрачным или заменить на другой виджет).
placeholderBuilder
Описание: Функция, возвращающая виджет-заполнитель для
Hero
на экране, пока выполняется переход.Пример:
placeholderBuilder: (context, size, child) { return Container(color: Colors.grey); }
Применение: Показывает элемент-заполнитель, пока основной виджет еще не появился на экране.
transitionOnUserGestures
Описание: Позволяет использовать анимацию
Hero
, когда пользователь вручную перетаскивает экран (например, свайпом назад на iOS).Пример:
transitionOnUserGestures: true
Применение: Полезно для устройств с жестами навигации, чтобы позволить анимации работать плавно при свайпе.
Итог
Hero
— это виджет для создания впечатляющих анимационных переходов между экранами с минимальной настройкой. Он делает переходы между экранами более естественными и привлекательными для пользователя, добавляя глубину и визуальный интерес к вашему приложению.
Last updated