Анимация героя, начиная с бокового меню и заканчивая на экране назначения в Flutter

Question

Я пытаюсь сделать анимацию героя, которая начинается с элемента ящика бокового меню (это виджет героя) и заканчивается на виджете героя нового экрана.Например, на изображении, показанном ниже, значок круговой диаграммы должен анимироваться до конечного виджета при отображении маршрута назначения:

Каждый экран содержит свойсобственный эшафот с экземпляром виджета общего ящика:

Scaffold(
    ...
    drawer: MyAppDrawer();
 )

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

Экран назначения заменяет текущий экран следующим образом:

Navigator.of(context).pushReplacementNamed("/");

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

There are multiple heroes that share the same tag within a subtree.

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

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

Спасибо!

Answer 1

Я уже столкнулся с этой проблемой героя в своем проекте.Если вы поместите такой же тег героя, как

tag:1 , tag :1, tag :1

, тогда вы получите такую ​​ошибку

tag:2 , tag:3 , tag:4

. С помощью этого трюка вы получите идеальное решение.и помните, что каждый тег героя должен быть уникальным на одном экране.И если вы используете flotingActionButton, то вам нужно поместить тег определения внутри кнопки.

Answer 2

 GestureDetector(
                        onTap: () => Navigator.push(
                            context,
                            PageRouteBuilder(
                                transitionDuration:
                                    Duration(milliseconds: 700),
                                pageBuilder: (_, __, ___) => StoryInside(
                                      tag: "Story $index",
                                    ))),
                        child: Hero(
                          tag: 'Story $index',
                          child: Material(
                            animationDuration: Duration(seconds: 20),
                            color: Colors.transparent,
                            child: ListTile(
                              title: Text(
                                'Story $index ',
                                style: style,
                              ),
                            ),
                          ),
                        )),


 Hero(
              tag: '${widget.tag}',
              transitionOnUserGestures: true,
              child: Text(
                '${widget.tag}',
                style: style,
              ),
            ),

Answer 3

Проблема в том, что вы не открываете ящик для всех экранов, которые вы используете для каждого экрана, создавая новый MyAppDrawer.Подумав быстро, вы можете создать MyAppDrawer где-нибудь еще и импортировать один и тот же объект на каждый экран