플러터] 네비게이션과 라우팅 - 새로운 화면으로 이동하고 돌아오기

대부분의 앱은 다양한 정보를 표시하기 위해 여러 화면을 포함합니다. 예를 들어, 한 앱에는 제품을 표시하는 화면이 있을 수 있습니다. 사용자가 제품 이미지를 탭하면 새 화면에서 해당 제품의 세부 정보를 표시합니다.

 

Flutter에서는 화면과 페이지를 "라우트"라고 합니다. 이 문서의 나머지 부분에서는 라우트라는 용어를 사용합니다.

• Android에서 라우트는 액티비티(Activity)와 동등합니다.
• iOS에서 라우트는 뷰컨트롤러(ViewController)와 동등합니다.
• Flutter에서 라우트는 단순히 위젯입니다.

이 문서에서는 Navigator를 사용하여 새로운 라우트로 이동합니다.

 

다음 섹션에서는 다음 단계를 사용하여 두 라우트 간에 이동하는 방법을 보여줍니다:

1. 두 라우트 생성하기
2. Navigator.push()를 사용하여 두 번째 라우트로 이동하기
3. Navigator.pop()을 사용하여 첫 번째 라우트로 돌아가기

 

 

 

1. 두 라우트 생성하기

먼저, 작업할 두 라우트를 생성합니다. 이 예제는 기본 예제이므로 각 라우트에는 단일 버튼만 포함됩니다. 첫 번째 라우트의 버튼을 탭하면 두 번째 라우트로 이동합니다. 두 번째 라우트의 버튼을 탭하면 첫 번째 라우트로 돌아갑니다.

 

먼저 시각적 구조를 설정합니다:

class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            // 탭하면 두 번째 라우트로 이동합니다.
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 탭하면 첫 번째 라우트로 돌아갑니다.
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

 

 

 

2. Navigator.push()를 사용하여 두 번째 라우트로 이동하기

새로운 라우트로 전환하려면 Navigator.push() 메서드를 사용합니다. push() 메서드는 Navigator가 관리하는 라우트 스택에 라우트를 추가합니다. 라우트는 어디서 올까요? 직접 생성하거나 MaterialPageRoute를 사용할 수 있습니다.

 

MaterialPageRoute는 플랫폼별 애니메이션을 사용하여 새로운 라우트로 전환하는 데 유용합니다.

 

FirstRoute 위젯의 build() 메서드에서 onPressed() 콜백을 업데이트합니다:

// `FirstRoute` 위젯 내에서:
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SecondRoute()),
  );
}

 

 

 

3. Navigator.pop()을 사용하여 첫 번째 라우트로 돌아가기

두 번째 라우트를 닫고 첫 번째 라우트로 돌아가려면 어떻게 해야 할까요? Navigator.pop() 메서드를 사용합니다. pop() 메서드는 Navigator가 관리하는 라우트 스택에서 현재 라우트를 제거합니다.

 

원래 라우트로 돌아가려면 SecondRoute 위젯의 onPressed() 콜백을 업데이트합니다:

// `SecondRoute` 위젯 내에서:
onPressed: () {
  Navigator.pop(context);
}

 

 

 

전체 예제

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

 

 

 

CupertinoPageRoute로 네비게이션

이전 예제에서는 Material Components의 MaterialPageRoute를 사용하여 화면 간 네비게이션하는 방법을 배웠습니다. 그러나 Flutter에서는 Material 디자인 언어에 국한되지 않으며, iOS 스타일의 Cupertino 위젯도 사용할 수 있습니다.

 

Cupertino 위젯으로 네비게이션을 구현하는 것은 MaterialPageRoute를 사용하는 것과 동일한 단계를 따르지만, 대신 iOS 스타일의 전환 애니메이션을 제공하는 CupertinoPageRoute를 사용합니다.

 

다음과 같은 위젯들을 교체하면 됩니다.:

• MaterialApp이 CupertinoApp으로 교체
• Scaffold가 CupertinoPageScaffold로 교체
• ElevatedButton이 CupertinoButton으로 교체

 

이렇게 하면 예제가 현재 iOS 디자인 언어를 따릅니다.

 

CupertinoPageRoute를 사용하기 위해 모든 Material 위젯을 Cupertino 버전으로 교체할 필요는 없습니다. Flutter는 필요에 따라 Material과 Cupertino 위젯을 혼합하여 사용할 수 있도록 허용합니다.