Hero, fullScreenDialogue

import 'package:flutter/material.dart';
import 'package:toonflix/screens/detail_screen.dart';

class Webtoon extends StatelessWidget {
  final String title, thumb, id;

  const Webtoon({
    super.key,
    required this.title,
    required this.thumb,
    required this.id,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(
              title: title,
              thumb: thumb,
              id: id,
            ),
            fullscreenDialog: true,
          ),
        );
      },
      child: Column(
        children: [
          Hero(
            tag: id,
            child: Container(
              width: 250,
              clipBehavior: Clip.hardEdge,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    blurRadius: 15,
                    offset: const Offset(10, 10),
                    color: Colors.black.withOpacity(0.3),
                  )
                ],
              ),
              child: Image.network(thumb),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            title,
            style: const TextStyle(
              fontSize: 22,
            ),
          ),
        ],
      ),
    );
  }
}

제공된 Flutter 코드는 웹툰을 표시하는 데 사용되는 Webtoon 위젯을 정의합니다. 이 위젯은 이미지(썸네일), 제목, 그리고 상세 화면으로의 내비게이션을 위한 상호작용을 포함하고 있습니다. 주요 구성 요소를 살펴보고, 특히 Hero 위젯에 대해 자세히 설명하겠습니다:

1. Webtoon 위젯

• StatelessWidget: Webtoon은 상태가 시간에 따라 변경되지 않는 stateless 위젯입니다.
• 파라미터: title, thumb, id 세 개의 파라미터를 필요로 합니다. 이 파라미터들은 웹툰의 제목과 썸네일을 표시하고 웹툰을 고유하게 식별하는 데 사용됩니다.
• GestureDetector: 이 위젯은 전체 Column 위젯을 감싸 상호작용을 가능하게 합니다. 탭하면 DetailScreen으로의 내비게이션이 트리거됩니다.

2. Navigator.push를 사용한 내비게이션

• 웹툰을 탭하면, GestureDetector의 onTap 콜백이 Navigator.push를 사용하여 DetailScreen으로 이동합니다.
• MaterialPageRoute가 전환을 위해 사용되며, fullscreenDialog: true는 새 화면이 전체 화면 모달 다이얼로그로 나타나야 함을 나타냅니다.

Flutter에서 MaterialPageRoute는 화면 전환을 처리하는 데 사용되는 라우트의 한 종류입니다. fullscreenDialog 속성은 이 라우트가 어떻게 표시될지 결정하는 중요한 요소 중 하나입니다.

3. fullscreenDialog 속성

• fullscreenDialog는 MaterialPageRoute 생성자에서 boolean 값으로 설정됩니다.
• fullscreenDialog: true로 설정하면, 새 화면이 전체 화면 모달 다이얼로그로 나타납니다.
• 이것은 새 화면이 아래에서 위로 슬라이드하며 나타나고, 화면 상단에는 일반적으로 닫기(X) 아이콘이나 취소 버튼이 포함되어 있습니다.
• 전체 화면 모달은 사용자가 화면을 명시적으로 닫거나 취소해야만 이전 화면으로 돌아갈 수 있게 만듭니다.
• 이는 주로 폼 제출, 상세 정보 표시, 사용자의 결정을 요구하는 화면 등에 사용됩니다.

예시:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailScreen(),
    fullscreenDialog: true,
  ),
);

이 코드에서, fullscreenDialog: true로 설정함으로써 DetailScreen은 전체 화면 모달 다이얼로그로 나타나게 됩니다. 이는 사용자 경험에 있어 더 몰입감 있는 화면 전환을 제공하며, 특정 화면이 다른 일반적인 화면보다 더 중요하거나 특별한 상호작용을 필요로 할 때 유용하게 사용될 수 있습니다.

4. Hero 위젯

• Hero 위젯은 화면 간의 전환을 위해 Flutter에서 사용하는 히어로 애니메이션을 생성하는 데 사용됩니다.

• Tag: 각 Hero 위젯은 고유한 태그를 가져야 합니다. 이 코드에서는 id를 태그로 사용하여 각 웹툰이 고유한 히어로 애니메이션을 가지도록 합니다.

• Child: Hero 위젯의 자식은 Image.network(thumb)를 포함하는 Container입니다. 이 이미지가 전환 중에 애니메이션될 부분입니다.

• DetailScreen으로 이동할 때, 동일한 태그(id인 경우)를 가진 다른 Hero 위젯이 있다면, Flutter는 웹툰의 썸네일이 현재 화면(Webtoon 위젯)에서 DetailScreen으로 전환되는 애니메이션을 생성합니다.

• 이는 썸네일이 목록 화면에서 상세 화면으로 매끄럽게 이동하고 크기가 조정되는 시각적으로 매력적인 효과를 만듭니다.

5. Hero 위젯의 어원

Hero 위젯의 이름은 '영웅'이라는 단어에서 유래되었습니다. 이는 두 스크린 간의 전환에서 중요한 역할을 하는 특정 요소(예: 이미지)가 마치 '영웅'처럼 주목받으며 전환되는 모습을 비유적으로 표현한 것입니다.

Hero 위젯은 Flutter에서 스크린 간 전환 시 특정 위젯을 부드럽게 '날아가게' 하는 애니메이션을 만듭니다. 두 스크린에서 동일한 Hero 태그를 가진 위젯이 서로 연결되어, 사용자가 한 화면에서 다른 화면으로 이동할 때 시각적으로 연속성을 제공합니다.

6. 사용법

Hero 위젯을 사용하려면 다음과 같이 합니다:

1. 원점 스크린과 목적지 스크린 양쪽에 Hero 위젯을 배치합니다.
2. 두 Hero 위젯에 동일한 tag를 할당합니다.
3. 사용자가 원점 스크린에서 Hero 위젯을 탭하면, Flutter는 자동으로 목적지 스크린의 Hero 위젯으로 부드러운 전환 애니메이션을 수행합니다.

7. 매개변수

Hero 위젯의 주요 매개변수는 다음과 같습니다:

• tag: 각 Hero 위젯을 식별하는 고유한 값입니다. 두 스크린의 Hero 위젯이 연결되려면 동일한 태그를 가져야 합니다.
• child: 애니메이션될 위젯입니다. 일반적으로 이미지나 텍스트와 같은 시각적 요소가 사용됩니다.

8. 사용 예시

// 원점 스크린
Hero(
  tag: 'hero-tag',
  child: Image.network('image-url'),
)

// 탭하면 목적지 스크린으로 이동
Navigator.push(context, MaterialPageRoute(builder: (context) => DestinationScreen()));

// 목적지 스크린
Hero(
  tag: 'hero-tag',
  child: Image.network('image-url'),
)

이 예시에서, 사용자가 원점 스크린의 이미지를 탭하면, Navigator.push를 통해 목적지 스크린으로 이동하며, 동일한 hero-tag를 가진 Hero 위젯이 목적지 스크린에서 전환 애니메이션을 수행합니다.