GestureDetector & 페이지 전환 애니메이션

🖱️ GestureDetector

Text, Image 위젯 등 button화 되어있지 않은 위젯들은 onPressed 기능이 없기 때문에 클릭을 할 수 없다.
-> 이를 가능하게 해주는 것이 GestureDetector 이다.

GestureDetector(
	child: Text('클릭 하고 싶지만 하지 못함'),
    onTap: () {}   
),

• 이렇게 GestureDetector로 감싸고 onTab 메서드를 활용하면 된다.
• onTap 이외에도
  onDoubleTap, onLongPress, onScaleStart 등등 있으니 구글링해서 찾아 쓰자
  

---

💫 페이지 전환 애니메이션

GestureDetector(
	child: Text('클릭 하고 싶지만 하지 못함'),
    onTap: () {
    	Navigator.push( context,
        	MaterialPageRoute(builder: (c) => 커스텀위젯())
        );
    },
),   

• 위 처럼 MaterialPageRoute를 활용하면 아래에서 위로 페이지가 나온다

GestureDetector(
	child: Text('클릭 하고 싶지만 하지 못함'),
    onTap: () {
    	Navigator.push( context,
        	CupertinoPageRoute(builder: (c) => 커스텀위젯())
        );
    },
),   

• CupertinoPageRoute를 쓰면 아이폰처럼 옆에서 나온다.
• 당연히 import도 해줘야한다.
  import 'package:flutter/cupertino.dart';

Navigator.push(context,
  PageRouteBuilder(
    pageBuilder: (c, a1, a2) => Upload(),
    transitionsBuilder: (c, a1, a2, child) => FadeTransition(opacity: a1, child: child),
    transitionDuration: Duration(milliseconds : 500),
  ),
)

• 여기서부터는 커스텀
• PageRouteBuilder를 활용하여 커스텀 애니메이션 효과를 줄 수 있다.
• 파라미터로는 첫번째로 context,
  두번째는 0에서 1로 증가하는 애니메이션 숫자 (새로운 페이지),
  세번째는 0에서 1로 증가하는 애니메이션 숫자 (기존 페이지),
  네번째는 현재 보여주는 위젯
• FadeTransition : Fade 효과를 준다.
  opacity: 애니메이션 숫자 (a1, a2)
  child: 보여줄 위젯 (child)
• 추가로 transitionDuration: Duration(milliseconds: 500) 이런걸로 몇 초동안 동작할지 설정 가능
• 이 외에도 SlideTransition, PositionedTransition, ScaleTransition, RotateTransition 등이 있다. 찾아서 쓰자