[Flutter] 페이지 전환 애니메이션 커스텀

멋진감자·2025년 7월 24일

Flutter

목록 보기

22/25

1. CupertinoPageRoute

import 'package:flutter/cupertino.dart';
 
GestureDetector(
  child: Text(widget.data[i]['user'], style: bold),
  onTap: () {
    Navigator.push(
      context,
      CupertinoPageRoute(builder: (c) => Profile()),
    );
  },
),

MaterialPageRoute 말고 CupertinoPageRoute를 쓰면 페이지 노출 시 우측에서 좌측으로 밀리는 트랜지션을 사용할 수 있다.
import문 필수!

2. PageRouteBuilder

GestureDetector(
  child: Text(widget.data[i]['user'], style: bold),
  onTap: () {
    Navigator.push(
      context,
      PageRouteBuilder(
        pageBuilder: (c, a1, a2) => Profile(),
        transitionsBuilder: (c, a1, a2, child) =>
          애니메이션위젯(),
      ),
    );
  },
),

transitionsBuilder(c, a1, a2, child)

PageRouteBuilder 쓸 땐 파라미터 세 개가 필요하다.
커스텀 애니메이션을 transitionsBuilder에 넣을 수 있는데
얘는 파라미터 네 개가 필요하다.

네 개 파라미터 중 c는 context고

a1이 젤 중요한데 animation object라고 한다.
애니메이션이 얼마나 진행됐는지 0에서 1사이 숫자로 표현해준다.
페이지 전환 시작시엔 0, 전환이 끝나면 1인 셈이다.

a2도 animation object인데 child 말고 기존 페이지의 진행도를 의미한다.
보통 child에 애니메이션을 주고 싶으니 쓸 일이 많지 않을듯

child는 애니메이션 줄 애고 위 코드같은 경우 Profile이 들어있는 격

transitionsDuration

애니메이션 진행 속도를 지정할 수 있다.
예를 들어 transitionsDuration: Duration(miliseconds: 500)는
500밀리초 동안 애니메이션을 동작시키라는 의미다.

애니메이션 위젯

이름만 봐도 대충 뭐하는 위젯인지 알 수 있다.
이리저리 사용해보기

FadeTransition

FadeTransition(opacity: a1, child: child)

a1이 애니메이션 진행도이므로(0 -> 0.1 -> ... -> 1)
opacity에 주면 a1과 함께 불투명도가 높아지며 Fade-In 효과를 만들어낸다.

SlideTransition

PageRouteBuilder(
  pageBuilder: (c, a1, a2) => Profile(),
    transitionsBuilder: (c, a1, a2, child) =>
	  SlideTransition(
		position: Tween(
		  begin: Offset(-1.0, 0.0),
		  end: Offset(0.0, 0.0),
		).animate(a1),
		child: child,
	  ),
),

여기선 begin이 중요한데 slide 애니메이션의 시작 위치를 정할 수 있다.
왼쪽이 x 좌표고 오른쪽이 y 좌표다.
위 코드의 경우 페이지가 좌측에서 우측으로 밀리고, (1.0, 0,0)이라면 그 반대다.
(0.0, -1.0)이면 위에서, (1.0, -1.0)이면 우측 상단 모서리에서 밀려온다.