Flutter에서 화면 전환을 위한 주요 요소들: Navigator, MaterialPageRoute, GestureDetector

Flutter는 사용자가 앱에서 페이지를 전환하거나 새로운 화면을 탐색할 수 있도록 다양한 도구와 위젯을 제공합니다. 이 글에서는 Navigator, MaterialPageRoute, GestureDetector에 대해 설명하고, 이들이 어떻게 사용되는지 예제를 통해 이해해 보겠습니다.

1. Navigator

Navigator는 Flutter의 네비게이션과 화면 전환을 관리하는 핵심 클래스입니다. Navigator는 앱의 스택(stack) 구조를 관리하며, 이를 통해 새로운 화면을 푸시(push)하거나 기존 화면을 팝(pop)할 수 있습니다.

• push(): 새로운 화면을 스택에 추가하여 표시합니다.
• pop(): 현재 화면을 제거하고 이전 화면으로 돌아갑니다.

예제 코드:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

위 코드는 SecondScreen이라는 새로운 화면을 현재 화면 위에 추가하여 전환합니다.

2. MaterialPageRoute

MaterialPageRoute는 Navigator에서 화면을 전환할 때 사용하는 클래스입니다. 이 클래스는 기본적으로 Material Design의 애니메이션과 화면 전환 효과를 제공합니다.

• builder: 새로운 화면을 생성하는 함수입니다.
• fullscreenDialog: true로 설정하면 화면 전환 시 전체 화면 다이얼로그 형태로 전환됩니다.

예제 코드:

MaterialPageRoute(
  builder: (context) => SecondScreen(),
  fullscreenDialog: true,
);

3. GestureDetector

GestureDetector는 사용자의 다양한 제스처(탭, 드래그, 스와이프 등)를 인식하는 위젯입니다. 특정 제스처가 발생했을 때 실행할 코드를 지정할 수 있어, 화면 전환이나 이벤트 처리에 자주 사용됩니다.

• onTap: 화면을 탭했을 때 호출되는 콜백 함수입니다.
• onDoubleTap, onLongPress 등 다양한 제스처 이벤트를 제공합니다.

예제 코드:

GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
  },
  child: Container(
    color: Colors.blue,
    height: 100,
    width: 100,
  ),
);

위 코드는 사용자가 Container 위젯을 탭하면 SecondScreen으로 화면이 전환되도록 설정한 예제입니다.

정리

• Navigator는 Flutter에서 화면 스택을 관리하여 화면 전환을 담당합니다.
• MaterialPageRoute는 Navigator와 함께 사용되어 페이지 전환의 경로를 정의합니다.
• GestureDetector는 사용자의 터치 이벤트를 인식하여 화면 전환이나 특정 작업을 트리거할 수 있도록 돕습니다.

이 세 가지 요소를 결합하면 사용자가 특정 위젯을 탭하거나 제스처를 사용할 때 원하는 화면으로 자연스럽게 전환하는 앱을 만들 수 있습니다.