Ошибка при реализации анимации героя во флаттере - PullRequest
Новая
       100

Ошибка при реализации анимации героя во флаттере

0 голосов
/ 09 мая 2020

Итак, я пытаюсь создать пользовательский интерфейс с деталями велосипеда, и у меня не получается заставить работать анимацию моего героя. Сначала я составил список мотоциклов с изображениями, которые при нажатии отображает детали. Я пытаюсь добавить анимацию героя к изображению во время перехода на другую страницу, но анимация не работает https://gph.is/g/Z8BQPPz

when pressing the image the screen navigate to another page

     Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 10.0, vertical: 6.0),
                  child: GestureDetector(
                        onTap: () {

                          Navigator.push(
                              context,
                              PageRouteBuilder(
                                  pageBuilder: (context, a, b) =>
                                      DetailsOfNewBikes(value: item)));
                        },
                        child: Hero(
                          tag:'item.bikeimage',
                                                      child: Container(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: NetworkImage(
                                      item.bikeimage,
                                    ),
                                    fit: BoxFit.cover,
                                    colorFilter: ColorFilter.mode(
                                      Colors.black26,
                                      BlendMode.darken,
                                    ),
                                  ),
                                  borderRadius: BorderRadius.circular(10.0),
                                  color: Colors.grey,
                                ),
                                    ),
                        )))

и на следующей странице изображения я использовал героя с тем же тегом 

                  child: new Column(
                children: <Widget>[
                  Hero(
                    tag:'widget.value.bikeimage',
                                          child: Container(
                                            child: Padding(

                      child: Image.network('${widget.value.bikeimage}'),
                      padding: EdgeInsets.symmetric(horizontal: 0.0),
                    ),
                                          ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                ],
              ),

Ответы [ 3 ]

3 голосов
/ 09 мая 2020

Каждый виджет героя требует уникального тега героя, чтобы он мог определить, какой виджет вы хотите анимировать.

Примечание: убедитесь, что в оба тега screen one hero должны быть одинаковыми , чтобы при переходе с первого экрана на второй виджет можно было найти.

2 голосов
/ 09 мая 2020

Hero tag должна быть уникальной строкой, но совместно используемой на обоих экранах.

я считаю, что в вашем случае вы хотели бы иметь идентификатор изображения в качестве тега, а при переходе к следующему экран передать тот же идентификатор. item.bikeimage или что-то вроде уникального. 

child: Hero(
                      tag: item.id,
                      child: Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                image: NetworkImage(
                                  item.bikeimage,
                                ),
                                fit: BoxFit.cover,
                                colorFilter: ColorFilter.mode(
                                  Colors.black26,
                                  BlendMode.darken,
                                ),
                              ),
                              borderRadius: BorderRadius.circular(10.0),
                              color: Colors.grey,
                            ),
                                ),
                    )))


    child: new Column(
            children: <Widget>[
              Hero(
                tag: widget.value.id,
                child: Container(
                        child: Padding(
                  child: Image.network('${widget.value.bikeimage}'),
                  padding: EdgeInsets.symmetric(horizontal: 0.0),
                ),
                                      ),
              ),
              SizedBox(
                height: 5,
              ),
            ],
          ),
2 голосов
/ 09 мая 2020

Вам нужен один и тот же tag для анимации вашего героя.

Попробуйте использовать один и тот же тег для обоих виджетов героя. В приведенном ниже примере я использовал тег back.

Попробуйте приведенный ниже код, он отлично работает:

ПЕРВЫЙ ЭКРАН 

    Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 10.0, vertical: 6.0),
                  child: GestureDetector(
                        onTap: () {

                          Navigator.push(
                              context,
                              PageRouteBuilder(
                                  pageBuilder: (context, a, b) =>
                                      DetailsOfNewBikes(value: item)));
                        },
                        child: Hero(
                          tag:'back',
                                                      child: Container(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: NetworkImage(
                                      item.bikeimage,
                                    ),
                                    fit: BoxFit.cover,
                                    colorFilter: ColorFilter.mode(
                                      Colors.black26,
                                      BlendMode.darken,
                                    ),
                                  ),
                                  borderRadius: BorderRadius.circular(10.0),
                                  color: Colors.grey,
                                ),
                                    ),
                        )))

ВТОРОЙ ЭКРАН 

   child: new Column(
                children: <Widget>[
                  Hero(
                    tag:'back',
                                          child: Container(
                                            child: Padding(

                      child: Image.network('${widget.value.bikeimage}'),
                      padding: EdgeInsets.symmetric(horizontal: 0.0),
                    ),
                                          ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                ],
              ),

Чтобы узнать больше об анимации героев, перейдите по ссылке ниже:

Анимация героев во флаттере

Надеюсь, это поможет.

...