Navigator

Flutter에서는 Navigator 위젯을 사용하여 화면 간 전환을 구현할 수 있다.

 

Navigator란?

Flutter에서 Navigator는 앱의 화면 간 이동을 관리하는 위젯이다.

Navigator는 stack 구조로 되어 있어, 새로운 화면을 push하면 stack에 쌓이고, pop하면 stack에서 제거된다.

이를 통해 사용자는 앱 내에서 화면 간 이동을 자유롭게 할 수 있다.

 

 

화면 생성

lib 폴더 안에 screen 폴더를 생성하고, 그 안에 first_screen.dart와 second_screen.dart 파일을 생성한다.

각 파일에는 아래와 같이 간단한 위젯 트리를 작성한다.

first_screen.dart 파일의 코드

second_screen.dart 파일의 코드

 

 

Navigator 활용하기

이제 Navigator를 사용하여 FirstScreen에서 SecondScreen으로 이동하고, 다시 FirstScreen으로 돌아오는 기능을 구현해 보겠다.

 

first_screen.dart의 ElevatedButton의 onPressed에 다음과 같이 작성한다.

context는 위젯 트리에 대한 정보를 가지고 있다.

그렇기 때문에 네이게이션으로 페이지를 이동할 때 위젯 트리가 어떻게 구성되어 있는지 코드 상에서 알아야 하기 때문에 of(context)를 넣어줘야 한다.

 

새로운 페이지를 화면에 띄우기 위해서는 MaterialPageRoute 클래스를 써야 한다.

스크린 A와 스크린 B 사이에 데이터를 전송(애니메이션)하고 받아야 될 경우가 있기 때문에 하나의 클래스를 중간에 두게 된다.

MaterialPageRout는 페이지를 이동할 때 기본 애니메이션을 제공해준다.

 

builder 파라미터는 위젯을 반환하는 함수인데, 
무조건 파라미터로 BuildContext context가 들어간다.

 

Navigator위젯의 push() 메서드를 사용하여 SecondScreen으로 이동한다.

MaterialPageRoute를 사용하여 페이지 라우트를 생성하고, builder 속성에 SecondScreen을 반환하는 함수를 전달한다.

 

second_screen.dart의 ElevatedButton의 onPressed에는 다음과 같이 작성한다.

Navigator.pop() 메서드를 사용하여 이전 화면으로 돌아간다.

여기서는 SecondScreen에서 FirstScreen으로 되돌아가게 된다.

 

 

실행하기

flutter run 명령어로 앱을 실행하면 FirstScreen이 나타나고, 'Second Screen 이동' 버튼을 누르면 SecondScreen으로 이동한다. SecondScreen에서 'First Screen 돌아가기' 버튼을 누르면 다시 FirstScreen으로 돌아온다.

 

이렇게 Navigator를 사용하여 손쉽게 Flutter 앱에서 화면 전환을 구현할 수 있다.

Navigator는 스택 구조로 페이지를 관리하므로, push()로 새로운 페이지를 스택에 추가하고 pop()으로 스택의 최상단 페이지를 제거하며 이전 페이지로 돌아간다.