[Flutter] Error : multiple heroes

Flutter 오류

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

Hero 위젯이 동일한 tag 값을 가진 두 개 이상의 Hero 위젯을 한 화면(또는 서브트리)에서 사용하려고 할 때 발생합니다.
Hero 위젯은 tag를 통해 애니메이션 대상 요소를 식별하므로, 각 tag는 고유해야 합니다.

해결 방법

1. tag 값 고유하게 설정

각 Hero 위젯에 고유한 tag 값을 설정해야 합니다. 보통 고유 식별자를 사용하여 중복을 방지합니다.

Hero(
  tag: 'note_${note.id}', // 각 노트의 고유 ID 사용
  child: NoteItem(note: note),
)

2. 중복된 Hero 위젯 제거

같은 화면에서 동일한 Hero 태그를 사용하는 경우, 중복된 Hero 위젯을 제거하거나 필요하지 않은 경우 Hero 위젯을 사용하지 않도록 수정합니다.

3. 조건에 따라 Hero 사용 여부 분기

특정 상황에서만 Hero를 적용하도록 조건을 추가합니다. 예를 들어, 고정된 메모와 일반 메모를 구분하여 처리합니다.

Widget buildNoteItem(Note note) {
  if (note.isFixed) {
    return Hero(
      tag: 'fixed_note_${note.id}',
      child: NoteItem(note: note),
    );
  } else {
    return NoteItem(note: note); // Hero 없이 표시
  }
}

4. Hero 사용 제거 (필요하지 않을 경우)

만약 Hero 애니메이션이 꼭 필요하지 않다면, 단순히 Hero를 제거하는 것도 방법입니다.

5. PageView에서 중복 태그 문제 해결

PageView를 사용하는 경우, 같은 Hero 태그가 여러 페이지에서 사용될 수 있습니다. 이 경우 각 페이지의 Hero 태그가 고유한지 확인하세요.

PageView.builder(
  itemCount: fixedNotes.length,
  itemBuilder: (context, index) {
    final note = fixedNotes[index];
    return Hero(
      tag: 'note_page_${note.id}', // 페이지마다 고유한 태그
      child: NoteItem(note: note),
    );
  },
);

요약

Hero의 tag는 반드시 고유해야 하므로, 고유 식별자를 사용합니다.
중복된 Hero 태그를 제거하거나 필요 없으면 사용하지 않습니다.
PageView나 리스트 등에서 반복적으로 렌더링되는 요소에 대해 각 Hero 태그를 고유하게 설정합니다.

HomeScreen 코드에서 "There are multiple heroes that share the same tag within a subtree" 오류를 수정하였습니다.

주요 수정 사항은 Hero 태그가 고유하도록 설정한 부분입니다.
Note 객체의 고유 ID(note.id)를 사용하여 중복을 방지했습니다.