[웹툰 앱 만들기] GestureDetector과 detail screen

먼저 이전에 만들었던 웹툰 정보를 바탕으로 웹툰의 포스터, 제목을 나타내는 위젯을 따로 Webtoon 파일로 분리했다.

https://github.com/soaringwave/Flutter-studying/commit/5b3e02f3606329a68b939e57b6f543faac71506b

Make Webtoon model and use it · soaringwave/Flutter-studying@5b3e02f

 

 

이젠 웹툰 정보를 클릭했을 때 클릭한 웹툰의 정보를 더 볼 수 있는 detail screen으로 이동할 수 있도록 설정한다.

 

먼저 웹툰 정보가 클릭되었음을 감지하고자 웹툰 Column을 GestureDetector로 감싼다. 그리고 클릭이 감지되었을 때 화면에 보일 detail screen을 만든다. 클릭된 웹툰의 detail screen이 보이는지 확인하고자 home screen의 AppBar를 복사붙여넣기 하되, 제목만 웹툰 제목으로 수정했다.

import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  final String title, thumb, id;
  const DetailScreen({
    super.key,
    required this.title,
    required this.thumb,
    required this.id,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          title,
          style: const TextStyle(
            fontSize: 25,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

 

그리고 클릭이 감지되었을 때 DetailScreen 위젯을 띄우게, ontap의 경우 Navigator.push로 라우터는 DetailScreen으로 설정했다. 이러면 특정 위젯을 띄워 실제로 스크린이 생성되는 것처럼 보이게 한다.

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

https://github.com/soaringwave/Flutter-studying/commit/e4e4c258ceb6bef9681b5467fe3873007a440f12

Detect click and move to detail_screen · soaringwave/Flutter-studying@e4e4c25

 

화면에서 클릭 후 DetailScreen을 띄우는 것을 확인하고, DetailScreen에 정보를 추가했다. 

https://github.com/soaringwave/Flutter-studying/commit/7613a402eb75c84631e1844134a15af2b7522e78

Show webtoon's poster in detail screen · soaringwave/Flutter-studying@7613a40

 

 

+

MaterialPageRoute에서 fullscreenDialog 값을 true 혹은 false 값으로 설정함에 따라 위처럼 달리 보인다. 기본값인 false로 설정되있을 땐 왼쪽 캡쳐처럼 카드로 보이고, true일 경우엔 오른쪽처럼 창으로 보인다.