Это очень просто. Вам просто нужно обернуть оба виджета в виджет Hero, используя одно и то же значение свойства TAG. Приведенный ниже фрагмент предполагает, что у вас Image
в ListTile
, и после щелчка пользователя вы показываете новую страницу с тем же изображением, но это изображение будет анимировано виджетом Hero
.
На странице списка элементы списка могут быть
ListTile(
leading: Hero(
tag: IMAGE_TAG, // must be the same in different pages
child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
),
title: Text('Anything'),
onTap: () => // Just go to full screen page
);
На полноэкранной странице
Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Hero(
tag: 'IMAGE_TAG', // must be the SAME VALUE DEFINED IN list tile hero child widget.
child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
),
),
);
OBS: свойство тега Hero
должно быть то же самое в разных контекстах, но если у вас есть список с множеством элементов, использующих виджет Hero
каждый Hero
int, один и тот же контекст / страница должны иметь разные значения tag
.
Для глубокого погружения в концепции анимации героев отметьте официальный номер c