Flutter - 6.9 Detail screen

웹툰 썸네일을 선택하면 상세정보를 볼 수 있도록 하는 부분을 만들 것이다.
'GestureDetector'를 사용한다.
Column을 GestureDetector로 감싼다.
Column의 각 뭐라고 해야돼 그 각각의 데이터? 아무튼 그거를 자동으로 인식하는 듯 하다.

GestureDetector에서 어떤 Gesture를 Detect할지를 이제 설정해야 한다.
onTap을 사용할 것이다. -> 터치할 때를 의미한다.
이때, onTap은 onTapDown + onTapUp인데, 각각은 '터치 할 때'와 '터치 하고 손을 뗄 때'를 의미한다.

detail_screen.dart 파일을 screens폴더에 미리 만들어 놓자.
새로운 화면을 띄울 때에는 Navigator를 사용한다.
Navigator에는 Navigator.pop, Navigator.push이 두 개 정도가 있는 듯 하다.
Navigator.pop은 뜻 그대로 팝업 화면을 띄울 때 사용한다.
Navigator.push는 아예 전체 화면으로 새로운 화면을 띄울 때 사용한다.

Navigator.push(context, route)
이렇게 두 개를 입력하도록 요구한다.
context는 우리가 알고 있는 그 context다.(알아서 문맥을 따져서 만들어준다니. 얼마나 편해...)
route는 뭘까?

Router<T> class
The dispatcher for opening and closing pages of an application.

This widget listens for routing information from the operating system (e.g. an initial route provided on app startup, a new route obtained when an intent is received, or a notification that the user hit the system back button), parses route information into data of type T, and then converts that data into Page objects that it passes to a Navigator.

출처 : flutter 공식 문서(https://api.flutter.dev/flutter/widgets/Router-class.html)
그러니까, route의 뜻이 '경로'라는 뜻이 있으니 그렇게 생각하면 될 듯 하다.
예를 들어... C:\asdf\aaaa\ 이런 경로를 말하는 거라고 생각하면 간단할 듯 하다.
그래서 다음의 문법을 사용할 수 있는데....

void main() {
  runApp(MaterialApp(
    home: const MyAppHome(), // becomes the route named '/'
    routes: <String, WidgetBuilder> {
      '/a': (BuildContext context) => const MyPage(title: Text('page A')),
      '/b': (BuildContext context) => const MyPage(title: Text('page B')),
      '/c': (BuildContext context) => const MyPage(title: Text('page C')),
    },
  ));
}

이렇게 각 페이지의 route를 지정해 놓고

Navigator.pushNamed(context, '/b');

이렇게 특정한 페이지를 간단하게 진입할 수 있다.(출처: https://api.flutter.dev/flutter/widgets/Navigator-class.html)
이 방식의 문법을 내가 ai와 함께 만들던 앱에서 일부 사용하던 적이 있는데, 조금만 지나고 까먹으면 겁나게 헷갈리니까 그냥 넘어가도 될 듯 하다.

그래서 어떻게 쓸까?
MaterialPageRoute, pageRouteBuilder같은 페이지를 route로 변경시켜주는 친구를 사용하면 된다.
MaterialpageRoute는 운영체제에 따라서 애니메이션이 다르거나 적용되지 않는 듯 하다.

MaterialPageRoute를 사용하는 경우...

        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) =>
                DetailScreen(title: title, thumb: thumb, id: id),
          ),
        );

사실 이 방법의 페이지 불러오는 화면도 이쁘더라.

PageRouteBuilder를 사용하는 경우...

        Navigator.push(
          context,
          PageRouteBuilder(
            transitionsBuilder:
                (context, animation, secondaryAnimation, child) {
              var begin = const Offset(1.0, 0.0);
              var end = Offset.zero;
              var curve = Curves.ease;
              var tween =
                  Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
              return SlideTransition(
                position: animation.drive(tween),
                child: child,
              );
            },
            pageBuilder: (context, anmation, secondaryAnimation) =>
                DetailScreen(id: id, title: title, thumb: thumb),
          ),
        );

이것은 오른쪽에서 왼쪽으로 슬라이드 되면서 widget 화면을 불러오는 코드이다.
대충 그렇다 생각하고 넘어가자.
나중에 정말 원하는 화면을 만들 고 싶을 때 다시 공부하는 것이 좋을 듯 하다.