본문 바로가기
Flutter

Flutter에서 화면을 전환하는 방법: Navigator 기본 사용법

by 김무스비 2024. 10. 13.
728x90
반응형

Flutter는 단일 화면으로 이루어진 앱뿐만 아니라 여러 화면을 전환하며 사용할 수 있는 구조를 제공합니다.

Flutter는 크로스 플랫폼 프레임워크로, 다양한 기기에서 앱이 실행되기 때문에 이러한 화면 전환 기능은 모바일, 웹, 데스크톱 등 여러 플랫폼에서 필수적입니다.

이 때 화면 전환을 쉽게 관리할 수 있도록 해주는 기능 중 하나가 바로 Navigator입니다. 이 글에서는 Navigator의 기본 개념과 Flutter에서 화면을 전환하는 방법에 대해 자세히 설명해보도록 하겠습니다.

Navigator 이미지

1. Navigator란 무엇인가?

Flutter에서 Navigator는 화면 전환을 담당하는 위젯입니다.

Navigator는 앱의 여러 페이지들을 스택(Stack) 구조로 관리하며, 새로운 화면을 추가하거나 기존 화면으로 돌아가는 등의 작업을 할 수 있습니다. 스택 구조는 LIFO(Last In, First Out) 방식으로 동작하므로, 가장 최근에 추가된 화면이 먼저 제거되고 그 전의 화면이 다시 표시됩니다.

2. 화면 전환을 위한 기본 구조

Flutter에서 화면 전환을 구현하려면, 먼저 각 화면을 위젯으로 정의해야 합니다. 예를 들어, 아래의 코드로 두 개의 간단한 화면으로 Navigator에 대해 간단히 설명해보고자 합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 화면 전환 예제',
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('첫 번째 화면'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('두 번째 화면으로 이동'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 화면'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('뒤로 가기'),
        ),
      ),
    );
  }
}

위 예제에서는 FirstScreen과 SecondScreen이라는 두 개의 화면을 정의했습니다. 첫 번째 화면에서 버튼을 눌렀을 때 Navigator.push()를 사용해 두 번째 화면으로 이동하고, 두 번째 화면에서는 Navigator.pop()을 사용해 다시 첫 번째 화면으로 돌아갈 수 있습니다.

3. Navigator.push()와 Navigator.pop()

화면을 전환할 때 Navigator.push()와 Navigator.pop()을 사용하는 것이 기본적인 방법입니다.

  • Navigator.push(): 현재 화면 위에 새 화면을 스택에 추가합니다.
  • Navigator.pop(): 스택에서 가장 최근에 추가된 화면을 제거하고, 이전 화면으로 돌아갑니다.

이 구조는 사용자가 앱을 탐색할 때 흔히 경험하는 "뒤로 가기" 버튼의 동작과 유사합니다. 안드로이드 기기에서는 하드웨어 뒤로 가기 버튼이 기본적으로 Navigator.pop() 동작을 호출하여 현재 화면을 닫고 이전 화면으로 돌아가게 합니다.

Navigator.push() 사용 예시

Navigator.push()를 사용하여 새로운 화면으로 이동하는 기본적인 방법은 아래와 같습니다.

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

MaterialPageRoute는 새 화면으로 이동할 때 전환 애니메이션을 제공하는 라우트입니다. 위 코드에서는 NewScreen이라는 새로운 화면으로 이동하게 됩니다.

Navigator.pop() 사용 예시

Navigator.pop()을 호출하면 현재 화면이 스택에서 제거되고, 이전 화면으로 돌아갑니다. 아래 코드를 통해 간단히 사용할 수 있습니다.

Navigator.pop(context);

4. 데이터를 전달하며 화면 전환하기

때로는 화면 전환 시 데이터를 전달해야 할 때가 있습니다. Flutter에서는 **Navigator.push()**와 **Navigator.pop()**을 사용하여 화면 간에 데이터를 주고받을 수 있습니다.

데이터를 전달하는 방법

새 화면으로 데이터를 전달하려면 Navigator.push()의 두 번째 화면 생성자에 데이터를 넘겨주면 됩니다. 다음과 같이요.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(data: '전달할 데이터'),
  ),
);

그런 다음, SecondScreen에서 이 데이터를 사용하려면, 생성자를 통해 받아와주기만 하면 됩니다.

class SecondScreen extends StatelessWidget {
  final String data;

  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 화면'),
      ),
      body: Center(
        child: Text('전달 받은 데이터: $data'),
      ),
    );
  }
}

위 코드에서는 첫 번째 화면에서 전달된 데이터를 두 번째 화면에서 받아서 출력하는 간단한 예시를 보여줍니다.

화면 종료 시 데이터 반환하기

화면을 닫을 때 데이터를 반환할 수도 있습니다. 예를 들어, 사용자가 입력한 데이터를 다시 이전 화면으로 전달하려면 다음과 같은 방식으로 처리할 수 있습니다.

Navigator.pop(context, '전달할 데이터');

이 데이터를 이전 화면에서 받으려면 Navigator.push()의 반환 값을 await로 처리할 수 있습니다.

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

print('받은 데이터: $result');

5. Navigator.pushReplacement()와 Navigator.pushAndRemoveUntil()

기본적으로 Navigator.push()는 화면을 스택에 쌓아두고 새로운 화면으로 이동하는 방식입니다. 하지만 특정한 상황에서는 기존 스택의 화면을 모두 제거하거나, 기존 화면을 대체하는 방식으로 화면을 전환해야 할 수도 있습니다.

Navigator.pushReplacement()

Navigator.pushReplacement()는 현재 화면을 스택에서 제거하고 새로운 화면으로 이동하는 방법입니다. 사용자가 현재 화면을 다시 볼 필요가 없을 때 유용합니다.

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

Navigator.pushAndRemoveUntil()

Navigator.pushAndRemoveUntil()는 스택에 남아 있는 모든 화면을 제거하고 특정 조건이 만족될 때까지 새로운 화면을 추가하는 방식입니다.

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
  (Route<dynamic> route) => false,
);

위 예시에서는 조건으로 false를 전달했으므로 모든 기존 화면을 제거하고 NewScreen만 남기게 됩니다.

6. 이름 있는 라우트 (Named Routes)

Flutter에서는 화면 전환을 더 구조화하고 싶을 때 이름 있는 라우트(Named Routes)를 사용할 수 있습니다. 이는 특히 앱에서 여러 화면을 다룰 때, 각 화면의 경로를 이름으로 지정해 쉽게 전환할 수 있도록 도와줍니다.

먼저, MaterialApp에서 라우트를 정의합니다.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => FirstScreen(),
    '/second': (context) => SecondScreen(),
  },
);

그런 다음, 화면 전환 시 이름을 사용하여 라우트를 참조합니다.

Navigator.pushNamed(context, '/second');

7. 결론

Flutter에서 화면 전환을 관리하는 Navigator는 앱의 흐름을 스택 구조로 관리하며, 이를 통해 화면을 전환하거나 뒤로 돌아가는 등의 동작을 쉽게 구현할 수 있습니다.

특히, Navigator.push()와 Navigator.pop()을 사용하면 기본적인 화면 전환을 처리하고, 필요한 경우 데이터를 주고받을 수 있습니다. 또한 Navigator.pushReplacement()와 Navigator.pushAndRemoveUntil()을 활용해 특정 상황에 맞는 화면 전환도 가능합니다.

Flutter에서 여러 화면을 사용하는 앱을 개발할 때 Navigator는 필수적인 도구이므로, 이 개념을 잘 이해하고 프로젝트에 적절히 적용해 보시면 좋을 것 같습니다.

728x90
반응형

'Flutter' 카테고리의 다른 글

Flutter의 핵심 위젯, Container 완벽 가이드: 속성부터 활용법까지  (0) 2024.10.13
[Flutter] StatefulWidget VS StatelessWidget 실제 코드와 함께 살펴보기  (0) 2024.10.13
Flutter에서 비동기 프로그래밍 이해하기: Future와 async/await  (0) 2024.10.12
Flutter의 가장 기본적이고 중요한 개념, 위젯에 대해 알아보기  (2) 2024.10.12
요즘 뜨고 있는 Flutter 프레임워크에 대해 알아보기  (0) 2024.10.12

관련글

티스토리툴바