[Flutter] Navigator 란?

Flutter의 Navigator

Navigator는 Flutter에서 페이지 간의 전환을 관리하는 위젯입니다. 앱 내에서 화면을 이동하거나 스택 방식으로 페이지를 추가 및 제거할 수 있습니다. Navigator는 화면을 트랙킹하는 역할을 하며, 각 페이지는 스택에 푸시(push)되고, 필요할 때 팝(pop)됩니다.

 

 

 

 

 

 

Navigator의 주요 기능

• push: 새로운 페이지를 스택에 추가하여 화면 전환을 수행합니다.
• pop: 현재 페이지를 스택에서 제거하고 이전 페이지로 돌아갑니다.
• Named Routes: 경로 이름을 통해 특정 페이지로 이동할 수 있습니다.

 

 

 

 

 

 

 

 

 

Navigator의 기본 사용법

Navigator.push()와 Navigator.pop()를 사용하여 페이지를 전환하는 기본적인 예제입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('첫 번째 페이지'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('다음 페이지로 이동'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 페이지'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('이전 페이지로 돌아가기'),
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

 

 

Navigator의 주요 메서드

• push: 새로운 페이지를 스택에 추가합니다. Navigator.push()는 비동기 메서드이며, 페이지가 추가된 후의 결과를 반환할 수 있습니다.
• pop: 현재 페이지를 스택에서 제거하고 이전 페이지로 돌아갑니다. Navigator.pop()는 이전 화면으로 돌아갈 때 주로 사용됩니다.
• pushReplacement: 현재 페이지를 대체하여 새로운 페이지로 전환합니다. 즉, 현재 페이지는 스택에서 제거되고, 새로운 페이지가 추가됩니다.
• pushNamed: 이름이 지정된 라우트를 사용하여 페이지를 전환합니다. 이를 사용하면 더 구조적이고 읽기 쉬운 라우팅을 구현할 수 있습니다.

 

 

 

 

 

 

 

 

 

Named Routes 사용 예시

Navigator.pushNamed()를 사용하면 경로 이름을 통해 페이지를 전환할 수 있습니다. 이를 위해서는 MaterialApp에서 경로를 미리 정의해야 합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 경로 설정
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('첫 번째 페이지'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');  // 이름을 사용하여 페이지 전환
          },
          child: Text('다음 페이지로 이동'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 페이지'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);  // 이전 페이지로 돌아가기
          },
          child: Text('이전 페이지로 돌아가기'),
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

 

 

 

Navigator의 다양한 사용 사례

• 페이지 간 전환: 여러 페이지로 구성된 앱에서 페이지를 전환할 때 사용합니다.
• 스택 기반 네비게이션: Navigator는 스택 구조로 페이지를 관리하여 이전 화면으로 쉽게 돌아갈 수 있습니다.
• 모달 창 띄우기: 특정 조건에서 모달 창을 띄우고, 창이 닫힐 때 결과를 받아올 수 있습니다.

 

 

 

 

 

 

 

 

 

 

결론

Navigator는 Flutter에서 페이지 전환을 관리하는 강력한 도구입니다. push, pop 등의 메서드를 통해 간단한 페이지 전환부터 복잡한 라우팅 구조까지 모두 처리할 수 있습니다. 특히 Named Routes를 사용하면 더 깔끔하고 유지보수하기 쉬운 라우팅을 구현할 수 있습니다.