[TIL-035] Flutter Hero위젯 중복 에러 해결 방법

문제 발생

영화 앱을 만들고 있는데 포스터를 터치하면 그 이미지를 `Here`위젯을 통해서 화면 전환을 하려 하다 위와 같은 문제가 생겼다.

 

발생 이유 추측

위에서 빨간 에러를 보면 '같은 tag를 공유하는 여러 개의 `Hero`위젯이 있다'라는 것 같다.

동일한 이미지가 현재 상영중, 인기순 카테고리에 들어있는 것을 보니 이것 때문인 것 같았다.

 

해결 방법

이미지가 같더라도 tag의 값을 각각 다르게 적용해서 해결

// 현재 상영중 카테고리에서 Detail페이지에 같은 tag를 넘겨줌
final heroTag = '현재 상영중_${movie.id}';
GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => DetailPage(heroTag: heroTag),
      ),
    );
  }
  child: Hero(
    tag: heroTag
  )
)


// 인기순 카테고리에서 Detail페이지에 같은 tag를 넘겨줌
final heroTag = '인기순_${movie.id}';
GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => DetailPage(heroTag: heroTag),
      ),
    );
  }
  child: Hero(
    tag: heroTag
  )
)