[flutter] 플러터 sticky 헤더를 가진 화면 전환 애니메이션 구현하기

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 단일 코드베이스에서 iOS와 Android 애플리케이션을 구축할 수 있습니다. 이번에는 플러터를 사용하여 sticky 헤더를 가진 화면 전환 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. sticky 헤더 위젯 생성하기

먼저, 화면 상단에 sticky 헤더를 띄우기 위한 위젯을 생성해야 합니다. 이 위젯은 SliverAppBar을 사용하여 구현할 수 있습니다. SliverAppBar은 스크롤 가능한 리스트나 그리드 뷰와 함께 사용할 수 있는 화면 상단에 고정된 앱 바를 생성하는 위젯입니다.

아래는 sticky 헤더 위젯을 생성하는 예시 코드입니다:

SliverAppBar(
  pinned: true,
  title: Text('Sticky Header'),
  backgroundColor: Colors.blue,
)

pinned 속성을 true로 설정하여 sticky 헤더로 만듭니다.
title 속성을 통해 헤더에 표시할 제목을 설정합니다.
backgroundColor 속성을 사용하여 헤더의 배경 색상을 지정할 수 있습니다.

2. 화면 전환 애니메이션 구현하기

화면 전환 애니메이션을 구현하기 위해 플러터의 PageRouteBuilder를 사용할 수 있습니다. PageRouteBuilder는 화면 전환을 위한 커스텀 애니메이션을 생성하는 빌더 클래스입니다.

아래는 화면 전환 애니메이션을 구현하는 예시 코드입니다:

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(animation),
        child: child,
      );
    },
    pageBuilder: (context, animation, secondaryAnimation) {
      return SecondScreen();
    },
  ),
);

transitionDuration 속성을 사용하여 애니메이션의 지속 시간을 설정할 수 있습니다.
transitionsBuilder 콜백 함수에서는 애니메이션의 구현을 정의합니다. 위의 예시에서는 슬라이드 효과를 사용하여 화면 전환 애니메이션을 구현하였습니다.
pageBuilder 콜백 함수에서는 전환될 화면을 반환합니다. 위의 예시에서는 SecondScreen 위젯을 반환하였습니다.

3. sticky 헤더와 화면 전환 애니메이션 통합하기

마지막으로, 헤더와 화면 전환 애니메이션을 통합하여 사용할 수 있습니다. 스크롤 가능한 리스트나 그리드 뷰를 포함한 위젯을 구현하고, CustomScrollView를 사용하여 sticky 헤더와 리스트를 결합합니다.

아래는 sticky 헤더와 화면 전환 애니메이션을 통합한 예시 코드입니다:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      title: Text('Sticky Header'),
      backgroundColor: Colors.blue,
    ),
    SliverList(
      delegate: SliverChildListDelegate([
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                transitionDuration: Duration(milliseconds: 500),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  return SlideTransition(
                    position: Tween<Offset>(
                      begin: Offset(1.0, 0.0),
                      end: Offset.zero,
                    ).animate(animation),
                    child: child,
                  );
                },
                pageBuilder: (context, animation, secondaryAnimation) {
                  return SecondScreen();
                },
              ),
            );
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            // 다른 항목을 클릭할 때의 동작
          },
        ),
        // 추가적인 리스트 아이템들...
      ]),
    ),
  ],
)

위의 예시에서는 리스트의 항목을 클릭했을 때, Navigator.push를 사용하여 화면 전환 애니메이션을 수행하도록 설정하였습니다. 클릭한 항목에 따라 각기 다른 화면으로 전환할 수 있습니다.

위와 같은 방식으로 sticky 헤더를 가진 화면 전환 애니메이션을 구현할 수 있습니다. 이를 응용하여 다양한 UI 구성과 애니메이션 효과를 구현할 수 있습니다. 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.

Flutter 공식 문서 - SliverAppBar

Flutter 공식 문서 - PageRouteBuilder