Flutter : Hero 위젯에 대해 알아보자

Hero 위젯에 대해 알아보자

Flutter Hero 위젯은 두 화면 사이의 애니메이션 전환을 쉽게 제공하는 위젯입니다. 일반적으로 이미지와 같은 요소를 다른 화면으로 전환하는 데 사용됩니다. Hero 위젯은 전환을 적용할 위젯을 감싸고 태그가 할당됩니다. 전환을 끝낼 위젯에서는 동일한 태그가 사용됩니다. 사용자가 첫 번째 화면의 위젯을 탭 하면 두 번째 화면으로 이동하고 동일한 태그가 있는 위젯 사이에 전환 애니메이션이 적용됩니다.

Hero 위젯을 사용하려면 두 개의 매개 변수(태그, 자식 위젯)가 필요합니다. 태그는 전환을 적용해야 하는 위젯을 식별하는 데 사용되며 자식 위젯은 전환을 적용해야하는 위젯입니다. 예를 들어, GridView를 사용하여 이미지를 표시하는 경우 이미지는 동일한 태그를 가진 Hero 위젯으로 래핑 됩니다. 사용자가 이미지를 탭 하면 동일한 태그가 있는 다른 화면으로 이동하고 동일한 태그를 가진 두 위젯 사이에 전환 애니메이션이 적용됩니다.

아래 Hero 위젯을 사용하는 방법입니다. 첫 번째 화면의 Hero 위젯을 생성하고 태그와 자식 위젯을 지정합니다.

Hero(
  tag: "wowHero",
  child: Image.network(
    "https://picsum.photos/250",
  ),
)

위 예제에서 첫 번째 이미지 위젯은 Hero 위젯으로 래핑 되고 "wowHero"라는 태그가 할당됩니다. 다른 화면에서 전환을 끝낼 때 동일한 태그를 사용해야 하므로이 태그는 고유해야합니다.

다음으로, 전환할 두 번째 화면을 만들고 Hero 위젯을 생성합니다. 첫 번째 화면과 동일한 "wowHero"태그를 사용합니다.

Scaffold(
  appBar: AppBar(
    title: Text("Second Page"),
  ),
  body: Center(
    child: Hero(
      tag: "wowHero",
      child: Image.network(
        "https://picsum.photos/250",
      ),
    ),
  ),
);

두 번째 화면에서 Hero 위젯은 첫 번째 화면과 동일한 "wowHero"태그를 사용하므로 두 번째 화면으로 전환 시 전환 애니메이션이 적용됩니다.

그러나 서브 트리 내에서 동일한 태그를 가진 여러 위젯이 존재하는 경우 예외가 발생합니다. 이는 전환할 위젯을 식별하는 데 모호성을 방지하기 위해 고유한 태그가 지정되어야 하기 때문입니다. 따라서 빌더 메서드에서 고유한 태그가 생성되어 Hero에 전달되도록 해야 합니다.

 

* 서브 트리(subtree) : 위젯 트리에서 특정 위젯을 루트로 하는 하위 트리를 의미합니다. 즉, 서브 트리는 특정 위젯을 기준으로 그 위젯과 그 위젯의 자식 위젯, 자식의 자식 위젯, 그 이하의 모든 하위 위젯을 포함하는 트리입니다.

Flutter에서 위젯은 계층 구조로 구성되어 있으며, 이 계층 구조를 위젯 트리라고 합니다. 위젯 트리는 모든 위젯이 계층적으로 구성되어 있으며, 이 계층 구조는 모든 위젯이 부모-자식 관계로 연결되어 있음을 의미합니다.

서브 트리는 이러한 위젯 트리에서 하위 트리를 의미합니다. 예를 들어, 다음과 같은 위젯 트리가 있다고 가정해 봅시다.

Container(
  child: Row(
    children: [
      Text("Hello"),
      Text("World"),
    ],
  ),
)

위젯 트리에서 Container 위젯이 루트이며, Row 위젯과 두 개의 Text 위젯이 자식으로 있습니다. 

---

개인적으로 학습하면서 정리한 내용입니다.

잘못된 내용이 있으면 알려주세요. 확인 후 수정 및 반영하도록 하겠습니다.

아래 전체 소스 및 실행 화면입니다.

 

오늘도 감사합니다.(__)>

 

 

lib.zip

0.00MB

 

 

< 실행영상 보기 >

Flutter - Hero widget demo 영상