[Flutter] GestureDetector & 페이지 전환 애니메이션 (CupertinoPageRoute,PageRouteBuilder)

GestureDetector & 페이지 전환 애니메이션(CupertinoPageRoute,PageRouteBuilder)

• 현재는 Navigator.push()로 페이지를 전환 시킬 경우
  • 아래에서 위로 페이지가 변경되고 있는데 전환 애니메이션을 다르게 하고 싶을 경우
  • 우선 현재 게시글을 작성한 유저 이름을 클릭 시 상세 페이지를 띄우면서 적용해보기
  • 그런데 Text() 에는 클릭 시에 대한 함수 실행을 할 수 없기에
    • GestureDetector() 위젯을 사용해서 onTap속성을 사용해 함수를 실행 시킬 수 있다.
    • 그리고 GestureDetector() 위젯은 어디에나 사용할 수 있는데
      • onTap 뿐만 아니라
        • 더블클릭을 위한 onDoubleTap
        • 왼쪽으로 스와이프 했을 때 실행 할 함수인 onHorizontalDragStart
        • 길게 눌렀을 때 실행시킬 함수 onLongPress
        • Pinch 제스처로 손가락으로 확대하는 함수인 onScaleStart
        • 등 다양한 함수들이 있다.

      GestureDetector(
                        child: Text(widget.homeData[idx]['user']),
                        onTap: (){
      
                        },
                      ),

      • 그래서 onTap을 할 경우 실행시킬 Navigator.push()를 작성
        • 여기서 MaterialPageRoute는 Navigator을 사용시 함께 사용하는 것으로 콤비라고 생각하면 좋을듯?
        • 계속 헷갈리구만.. ㅎ

        GestureDetector(
                        child: Text(widget.homeData[idx]['user']),
                        onTap: (){
                          Navigator.push(context, 
                            MaterialPageRoute(builder: (c) => Text("상세페이지"))
                          );
                        },
                      ),

• 이제 페이지 전환 커스텀 애니메이션 적용으로
  • 기본 사용법(쉬움)
    • 위에 작성한 MaterialPageRoute() 대신
    • CupertinoPageRoute() 를 사용하면 간단히 오른쪽에서 왼쪽으로 슬라이드 전환 효과를 줄 수 있다.
    • 사용시 자동으로 불러오는 코드로 해당 코드가 있어야 사용할 수 있다.
      • import 'package:flutter/cupertino.dart';
  • 커스텀 사용법(어려움)
    • 다양한 효과로 오른쪽에서 왼쪽 뿐만이 아니라 페이드 인,아웃 등 다양하게 줄 수 있다.
    • 코드로는 PageRouteBuilder()를 사용하면 된다.
      • 파라미터로는
        • pageBuilder: (c, a1, a2) ⇒ 보여줄 위젯(),
          • 기본적으로 3개의 파라미터를 작성해야한다.
        • tansitionsBuilder()의 코드를 작성
          • tansitionsBuilder: (c, a1, a2, child) ⇒ 애니메이션 위젯( FadeTransition(opacity: a1, child: child) )
          • c는 context
          • a1은 Animation Object가 되며 페이지 전환에 대한 진행도로 0~1 사이의 데이터가 변수에 담김
          • a2는 Animation Object가 되며 기존 페이지에 대한 효과를 주고 싶을 때 사용하는 a1의 기능과
          • child는 새로 띄울 페이지를 의미
          • 파라미터로는 4개를 작성해야한다.
            • 그리고 return으로는 애니메이션용 위젯을 넣어주면 되는데 위젯마다 사용 방법이 조금씩 다르기에 확인해보기!
              • 페이드 트랜지션은 FadeTransition()
              • 포지션변경 트랜지션은 PositionedTransition()
              • 스케일 트랜지션은 ScaleTransition()
              • 회전 트랜지션은 RotationTransision()
              • 슬라이드 트랜지션은 SlideTransiton()
              • 기존 페이와 새로 실행할 페이지가 똑같은 위젯의 경우 연결하는 효과를 주고 싶다면 Hero() 위젯도 자주 쓰니까 확인해보기
            • 커스텀 효과를 줄 수 있음
          • 만약 SlideTransition() 효과를 주고자 한다면 아래와 같이 작성

onTap: (){
          Navigator.push(context, 
            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,
                )
            )
          );
        },

• transitionDuration 속성으로 전환 속도를 조절
  • transitionDuration: Duration(milliseconds: 속도)