탭 이벤트

동작 감지해줌

• onTap : onTapDown + onTapUp = 터치

터치하면 상세 화면을 보여줄 예정

페이지 이동을 해야한다.

페이지 이동을 위해서 사용하는 것은

Navigator

Navigator는 아래 처럼 사용한다.
사실 동작방식을 보면 이동이라기 보다는 새로운 화면으로 기존 화면을 덮는 것

Navigator.push(context, route);

• context : BuildContext 의 context로 별도로 수정할 필요 없음

• route : 넘길 화면을 넣어줘야 하는데, push는 StatelessWidget을 원하지 않음
  push가 원하는 것은 'route'임.

  route 만들기

 MaterialPageRoute(builder: (context)=>DetailScreen( 파라미터 ) //StatelessWidget명)

MaterialPageRoute

MaterialPageRoute는 모든 애니메이션을 담당한다.
예를 들면 push하면 새로운 화면을 나타내기도 하고, X를 누르면 돌아갈 수도 있다.

MaterialPageRoute는 또 다른 클래스다.
StatelessWidget을 route로 감싸서 다른 스크린처럼 보이게 해준다.
(builder는 route를 만드는 함수)

전체 코드

return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            fullscreenDialog: true, //애니메이션 효과낼 수 있음
            builder: (context) => DetailScreen(
              title: title,
              thumb: thumb,
              id: id,
            ),
          ),
        );
      },

탭 동작을 체크해서, 탭이 되면 Navigator.push를 할건데, DetailScreen으로 파라미터들이랑 넘어가라

1. 탭
2. Navigator.push
3. push의 MaterialPageRoute로 만들어진 route는 StatelessWidget일 뿐인 DetailScreen을 렌더링
4. HomeScreen을 떠나야 하기 때문에 DetailScreen에서 scaffold를 렌더링해줘야함. (homeScreen은 이미 scaffold로 선언되어있음)

fullscreenDialog 로 애니메이션 효과 낼 수 있음
밑에서 올라오게 하거나, 옆에서 넘기듯이 화면을 전환할 수 있음

hero weidget

현재는 이미지를 불러오는 코드를 home, detail에서 모두 사용하여 이미지를 불러온다. 이러면 마치 다른 포스터인 것처럼 되는데

사용 방법 : 두 파일에서 표지 코드를(container) hero widget으로 감싸서 같은 태그를 준다.

children: [
          Hero(
            tag: id,
            child: Container(

포스터의 고유 ID 인 id를 tag로 설정해주면 된다

Home의 표지와 Detail의 표지가 같은 tag를 사용하므로 같은 표지로 인식한다.

결과 차이를 살펴보자

• 기존
  home이 가진 표지, datil이 가진 표지 각각 출력
  detail화면이 home을 가리듯이 동작함
• 수정 후
  home표지가 detail로 이동에서 출력