페이지 애니메이션

Navigator.push() 를 누르면 아래에서 올라오는게 맘에 안들 수 있음.

이와 연관해서 바꿀 수 있는 방법.

일단 유저를 누르면 프로필이 보일 수 있게 만들어보자.

Text(widget.jsondata[index]['user']),

위 Text 안에는 onPressed같은 애를 쓸 수 없음

 GestureDetector(
                    child: Text(widget.jsondata[index]['user']),
                    onTap: (){

                    },
                    onDoubleTap: (){},
                    onHorizontalDragStart: (){},
                    onLongPress: (){},
                  ),

위와 같이 사용하면 탭했을 때, 두번탭했을 때, 수직으로 드래그했을 때, 길게 눌렀을 때, 등등의 제스처 이벤트를 받을 수 있으니 이를 사용하면 됨!

onTap: (){
            Navigator.push(context,
              MaterialPageRoute(builder: (c)=> Text('위젯'))
            );
          },

이런식으로 사용하면 유저 아이디 클릭 시 프로필 페이지가 뜨게 만들 수 있음.

class Profile extends StatelessWidget {
  const Profile({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(),
     body: Text('프로필페이지')
    );
  }
}

이런식으로 프로필 페이지를 만들었음.

근데 스와이프 형태로 나오게 하고 싶음.

애니메이션 쪽인데..

CupertinoPageRoute

Navigator.push(context,
  CupertinoPageRoute(builder: (c)=> Profile())
);

이런식으로 사용하면 왼쪽에서 슬라이드 해서 옴 쿠퍼티노 페이지가 아이폰에서 사용하는 애들임.

PageRouteBuilder 사용

이렇게 사용하면 애니메이션 커스터마이징을 할 수 있음

PageRouteBuilder(
  pageBuilder: (c, a1, a2) => Profile(),
  transitionsBuilder: (c, a1, a2, child) =>
    FadeTransition(opacity: a1, child: child)
)

애니메이션 위젯은

• FadeTransition()
• PositionedTransition()
• ScaleTransition()
• RotationTransition()
• SlideTransition()

뭐 이런것들이 있음. 필요할 때 사용하면 됨.

참고로.. child 파라미터는 profile() 커스텀 위젯을 의미함. 맨 앞의 c는 context, 무시할 것. a1 : animate parameter 라고 하는데 페이지 전환이 다 되면 1, 되기 전 0 opacity를 a1으로 집어넣었으니 a1을 따라서 투명도가 변화되게 만들어라라고 하는 것과 같음

뭐 이해까지는 필요없고 그냥 따라서 사용하면됨. a2는 기존 페이지가 바뀌는 상태 a1은 새로운 페이지가 바뀌는 상태

transitionDuration: Duration(milliseconds: 500) 를 사용하면 애니메이션 속도 조절을 할 수 있음.

SlideTransition 을 사용하면

SlideTransition(
    position: Tween(
      begin: Offset(-1.0, 0.0), // 시작좌표
      end: Offset(0.0, 0.0), // 끝좌표
    ).animate(a1), 
    child: child
)

위와 같이 사용하면 된다.

시작좌표 : x좌표, y좌표 임.

오른쪽 왼쪽 왼쪽 오른쪽 방향 설정 가능

Hero라는 애도 있음 얘는 확대할 때, 같은 위젯을 연결해서 확대해서 새로운페이지로 만들어주는 식의 위젯이라고 보면 됨.