Flutter의 Hero 위젯으로 딥 다이빙

Flutter의 Hero 위젯 기능에 대한 자습서

이 기사는 Flutter 위젯에 대한 세부적인 연구를위한 일련의 기사 중 네 번째 기사입니다. ListViews, TextFields 및 FloatingActionButtons를 자세히 다루면 Flutter의 Hero 위젯으로 이동합니다.

영웅 애니메이션 소개

한 문장의 영웅 애니메이션은 단순히 앱이 다음 페이지로 이동할 때 한 화면에서 다음 화면으로“비행”하는 요소입니다.

영웅 애니메이션은 이제“영웅”이라고하는 아이콘과 같은 요소를 취합니다. 일단 페이지 전환이 트리거되면 일반적으로 아이콘을 클릭하면 영웅이 다음 페이지로 이동합니다. 사용자가 이전 페이지로 다시 이동하면 애니메이션이 다른 방향으로 이동하고 아이콘이 원래 위치로 돌아갑니다.

기본 영웅 애니메이션뿐만 아니라 사용자 정의 할 수있는 것들에 대해서도 논의 할 것입니다. 기본 사항을 먼저 봅시다.

기본 영웅 애니메이션 만들기

영웅 애니메이션은 Flutter에서 가장 쉬운 애니메이션 중 하나이며 많은 설정이 필요하지 않습니다. 위의 예를 살펴보면 두 페이지 모두에 동일한 앱 아이콘 위젯이 있음을 알 수 있습니다. 필요한 것은 Flutter에게 둘 다 연결되어 있음을 알리는 방법입니다.

아이콘과 같은 요소를 Hero 위젯에 배치하여이 작업을 수행합니다.

영웅(
  태그 : "DemoTag",
  아이 : 아이콘 (
    Icons.add,
    크기 : 70.0,
  ),
),

이 특정 영웅에게 이름을 부여하는 태그를 제공합니다. 같은 페이지에 여러 명의 영웅이있는 경우 각 영웅은 어디로 갈지 알고 있기 때문에 필요합니다.

이제 앱은 다음 페이지로 이동하려는 영웅 위젯이 있음을 알고 있습니다. 이제 우리가 필요로하는 것은 비행 할 곳입니다.

두 번째 페이지에 동일한 태그가있는 Hero 위젯 만 있으면됩니다.

영웅(
  태그 : "DemoTag",
  아이 : 아이콘 (
    Icons.add,
    크기 : 150.0,
  ),
),

그리고 결과는 다음과 같습니다.

위의 코드로 만든 영웅 애니메이션

영웅 애니메이션 사용자 정의

Hero 위젯을 사용하면 애니메이션의 측면을 사용자 정의 할 수 있습니다. 몇 가지 가능성을 살펴 보겠습니다.

자리 표시 자 추가

위젯이 있던 위치를 벗어나 위젯이 목적지에 도착하기 전에 목적지에 빈 공간이 있습니다. 이 위치에 자리 표시자를 추가 할 수 있습니다.

지금은 CircularProgressIndicator를 자리 표시 자로 사용하겠습니다.

영웅(
    태그 : "DemoTag",
    아이 : 아이콘 (
      Icons.add,
      크기 : 150.0,
    ),
    placeholderBuilder : (컨텍스트, 위젯) {
      반품 컨테이너 (
        높이 : 150.0,
        폭 : 150.0,
        자식 : CircularProgressIndicator (),
      );
    },
  ),

placeholderBuilder를 사용하여 자리 표시자를 구성하고 원하는 자리 표시 자로 위젯을 반환합니다.

자리 표시 자 사용 :

CircularProgressIndicator는 영웅이 도착할 때까지 영웅을 대신합니다.

영웅 위젯 변경

Flutter를 사용하면 두 페이지의 위젯을 변경하지 않고도 한 페이지에서 다른 페이지로 실제로 이동하는 위젯을 변경할 수 있습니다.

영웅 위젯의 하위 항목을 변경하지 않고 "+"아이콘 대신 로켓 아이콘을 영웅으로 사용합시다.

영웅 아이콘은 변경되지만 최종 아이콘은 동일하게 유지됩니다.

우리는 flightShuttleBuilder 매개 변수 (로켓 예제)를 사용하여이를 수행합니다.

영웅(
  태그 : "DemoTag",
  아이 : 아이콘 (
    Icons.add,
    크기 : 150.0,
  ),
  flightShuttleBuilder : (비행 컨텍스트, 애니메이션, 방향,
      fromContext, toContext) {
    반환 아이콘 (FontAwesomeIcons.rocket, 크기 : 150.0,);
  },
),

flightShuttleBuilder 메서드에는 5 개의 매개 변수가 있으며 애니메이션의 방향과 애니메이션을 제공합니다.

현재 로켓 아이콘 크기는 양방향으로 150.0입니다. 방법의 방향 매개 변수를 사용하여 각 방향에 대해 다른 구성을 가질 수 있습니다.

if (direction == HeroFlightDirection.push) {
  아이콘 반환 (
    FontAwesomeIcons.rocket,
    크기 : 150.0,
  );
} else if (방향 == HeroFlightDirection.pop) {
  아이콘 반환 (
    FontAwesomeIcons.rocket,
    크기 : 70.0,
  );
}
크기는 이제 방향이 다릅니다.

iOS 뒤로 스 와이프 동작으로 Hero 애니메이션 작동

iOS에서 뒤로 버튼을 누르면 영웅 애니메이션이 기본적으로 작동하지만 뒤로 스 와이프에서는 작동하지 않습니다.

뒤로 버튼 사용 :

뒤로 버튼은 영웅 애니메이션을 트리거합니다.

뒤로 스 와이프 사용 :

뒤로 스 와이프해도 영웅 애니메이션이 트리거되지 않습니다.

이 문제를 해결하려면 두 Hero 위젯 모두에서 transitionOnUserGestures를 true로 설정하십시오. 기본적으로 false입니다.

영웅(
  태그 : "DemoTag",
  아이 : 아이콘 (
    Icons.add,
  ),
  transitionOnUserGestures : true,
),

그리고 이것은 뒤로 스 와이프 할 때 영웅 애니메이션을 트리거합니다.

이 기사가 끝났습니다! 나는 당신이 그것을 즐기기를 바랍니다. Flutter 기사를 더 보려면 저를 따르고이 기사에 대해 의견이 있으시면 의견을 보내주십시오.

다른 프로파일과 기사도 자유롭게 확인하십시오.

트위터

깃 허브

내 다른 기사 중 일부