반응형
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("상세페이지")) ); }, ),
- onTap 뿐만 아니라
- 이제 페이지 전환 커스텀 애니메이션 적용으로
- 기본 사용법(쉬움)
- 위에 작성한 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() 위젯도 자주 쓰니까 확인해보기
- 커스텀 효과를 줄 수 있음
- 그리고 return으로는 애니메이션용 위젯을 넣어주면 되는데 위젯마다 사용 방법이 조금씩 다르기에 확인해보기!
- 만약 SlideTransition() 효과를 주고자 한다면 아래와 같이 작성
- pageBuilder: (c, a1, a2) ⇒ 보여줄 위젯(),
- 파라미터로는
- 기본 사용법(쉬움)
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: 속도)
'Flutter' 카테고리의 다른 글
[Flutter] Store 여러개 & GET 요청 (Provider) (0) | 2023.08.14 |
---|---|
[Flutter] Provider 사용하기 (0) | 2023.08.13 |
[Flutter] DB 없이 데이터 저장하는 방법 (Shared Preferences) (0) | 2023.08.11 |
[Flutter] 폰에 저장된 이미지 가져오기 (Image Picker) (0) | 2023.08.11 |
[Flutter] 상세페이지 만들기 (Navigator, Routes) (0) | 2023.08.10 |