플러터 Hero 위젯으로 매끄러운 페이지 전환 애니메이션 구현하기

 

애니메이션은 사용자 경험을 향상시키는 중요한 요소 중 하나입니다.

Flutter는 개발자가 간단하게 애니메이션을 구현할 수 있도록 다양한 위젯을 제공하며, 그중 Hero 위젯은 페이지 전환 시 시각적으로 일관된 전환 효과를 제공하는데 매우 유용한 도구입니다.

오늘은 Hero 위젯의 기본 사용법과 다양한 옵션에 대해 알아보겠습니다.

Hero 위젯이란?

Hero 위젯은 페이지 전환 시 특정 위젯의 시각적 요소를 다음 페이지로 자연스럽게 이어주는 역할을 합니다.

이를 통해 사용자는 두 페이지 간에 일관된 요소를 인지하며, 전환 애니메이션이 더욱 부드럽고 매끄럽게 느껴집니다.

기본 사용법

Hero 위젯을 사용하기 위해서는 두 페이지에서 동일한 tag를 가진 위젯을 정의해야 합니다.

이 tag는 Hero 위젯이 어떤 요소를 연결할지를 결정하는 고유 식별자 역할을 합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => SecondPage()),
            );
          },
          child: Hero(
            tag: 'hero-tag',
            child: Image.network(
              'https://via.placeholder.com/150',
              width: 150,
              height: 150,
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Image.network(
            'https://via.placeholder.com/300',
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}

주요 속성 설명

• tag: 고유 식별자 역할을 하며, 두 페이지의 Hero 위젯을 연결합니다.
• child: Hero 애니메이션이 적용될 위젯입니다.

Hero 위젯의 다양한 옵션

transitionOnUserGestures

이 속성은 Hero 애니메이션이 사용자의 제스처에 반응하도록 설정할 수 있습니다.

예를 들어, 사용자가 스와이프 제스처를 사용하여 페이지를 전환할 때 Hero 애니메이션을 활성화할 수 있습니다.

기본값은 false입니다.

Hero(
  tag: 'hero-tag',
  transitionOnUserGestures: true,
  child: Image.network('https://via.placeholder.com/150'),
)

flightShuttleBuilder

Hero 위젯이 두 페이지 간에 이동하는 동안 사용자 정의 애니메이션을 적용할 수 있습니다.

이 콜백 함수는 Hero가 출발지에서 목적지로 이동할 때 호출되며, 사용자 정의 위젯을 반환할 수 있습니다.

Hero(
  tag: 'hero-tag',
  child: Image.network('https://via.placeholder.com/150'),
  flightShuttleBuilder: (
    BuildContext flightContext,
    Animation<double> animation,
    HeroFlightDirection flightDirection,
    BuildContext fromHeroContext,
    BuildContext toHeroContext,
  ) {
    return ScaleTransition(
      scale: animation.drive(Tween<double>(begin: 0.0, end: 1.0)),
      child: toHeroContext.widget,
    );
  },
)

placeholderBuilder

목적지 페이지에서 Hero 위젯이 렌더링되기 전에 표시할 위젯을 정의합니다.

이 속성을 사용하면 이미지 로딩 중에 로딩 스피너와 같은 대체 위젯을 표시할 수 있습니다.

Hero(
  tag: 'hero-tag',
  child: Image.network('https://via.placeholder.com/150'),
  placeholderBuilder: (BuildContext context, Size heroSize, Widget child) {
    return Container(
      width: heroSize.width,
      height: heroSize.height,
      color: Colors.grey,
    );
  },
)

마무리

Hero 위젯은 Flutter에서 페이지 전환 시 자연스러운 애니메이션 효과를 제공하는 강력한 도구입니다.

tag 속성을 사용해 두 페이지의 Hero 위젯을 연결하고, 다양한 옵션을 활용해 애니메이션을 커스터마이즈할 수 있습니다.

이를 통해 사용자는 더 매끄럽고 일관된 전환 경험을 즐길 수 있습니다.

 

이 블로그가 여러분의 Flutter 개발에 도움이 되었기를 바랍니다! 질문이나 추가적인 설명이 필요하면 댓글로 알려주세요.

앞으로도 Flutter 관련 팁과 트릭을 공유할 예정이니, 블로그 구독을 잊지 마세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱