Flutter 내비게이션 기본 가이드: 화면 전환과 경로 관리 완벽 이해

Flutter에서 내비게이션은 앱 개발의 핵심 요소입니다. 여러 화면을 가진 앱에서 사용자 경험을 매끄럽게 제공하려면 Navigator와 같은 내비게이션 도구를 이해하고 활용해야 합니다. 이번 블로그 포스트에서는 Navigator를 활용해 기본적인 화면 전환을 구현하는 방법을 단계별로 설명합니다.

참고. Navigate to a new screen and back

내비게이션이란?

Flutter에서 내비게이션은 경로(Route)를 관리하며 화면 간 전환을 처리하는 작업입니다. Flutter에서는 화면이나 페이지를 Route라고 부릅니다. Android의 Activity, iOS의 ViewController와 유사합니다. Navigator는 이러한 경로를 스택(stack) 형태로 관리하며, push와 pop 메서드를 사용해 경로를 추가하거나 제거합니다.

Flutter 내비게이션의 기본 단계

1. 두 개의 Route 생성하기

두 개의 Route(화면)를 생성하여 전환을 구현합니다. 첫 번째 Route에서는 버튼을 클릭하면 두 번째 Route로 이동하고, 두 번째 Route에서는 다시 첫 번째 Route로 돌아옵니다.

import 'package:flutter/material.dart';

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate to second route
          },
          child: const Text('Open route'),
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first route
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

2. Navigator.push()로 경로 이동

Navigator.push() 메서드를 사용해 첫 번째 Route에서 두 번째 Route로 전환합니다. push는 새로운 경로를 Navigator의 스택에 추가합니다.

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

3. Navigator.pop()으로 경로 복귀

Navigator.pop() 메서드를 사용해 현재 경로를 제거하고 이전 경로로 돌아갑니다.

onPressed: () {
  Navigator.pop(context);
}

Flutter 내비게이션의 추가 기능

CupertinoPageRoute

iOS 스타일의 전환 애니메이션을 사용하려면 CupertinoPageRoute를 활용할 수 있습니다. MaterialPageRoute 대신 사용하면 iOS의 네이티브 전환 애니메이션을 구현할 수 있습니다.

Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => SecondRoute()),
);

데이터 전달 및 반환

1. 데이터를 새 경로로 전달하려면 Navigator.push() 메서드에 데이터를 포함시킵니다.
2. 이전 경로로 데이터를 반환하려면 Navigator.pop() 메서드에 데이터를 전달합니다.

실무에서 활용 팁

1. 경로 네이밍:
   • 앱이 복잡해질수록 경로를 이름으로 관리하는 named routes를 사용하는 것이 효율적입니다.
2. 애니메이션 커스터마이징:
   • 사용자 정의 애니메이션을 추가해 더 풍부한 전환 효과를 제공합니다.
3. 경로 스택 관리:
   • Navigator의 스택 구조를 활용해 복잡한 내비게이션 플로우를 구성하세요.

---

결론: Flutter 내비게이션의 유연성

Flutter의 내비게이션 시스템은 간단하면서도 유연합니다. Navigator와 Route를 사용해 기본적인 화면 전환부터 고급 사용자 정의 내비게이션까지 손쉽게 구현할 수 있습니다. 앱의 구조와 사용자 경험을 최적화하려면 내비게이션 패턴을 숙지하는 것이 중요합니다.

 

import 'package:flutter/cupertino.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('First Route'),
      ),
      child: Center(
        child: CupertinoButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              CupertinoPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Second Route'),
      ),
      child: Center(
        child: CupertinoButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}