[Flutter] 화면 이동하기

안녕하세요 골드입니다.

오늘은 flutter에서 navigator 클래스를 활용하여 간단하게 화면 이동하는 법에 대해 글을 작성하도록 하겠습니다.

 

Android에서 화면 이동은 Intent 객체를 활용하였습니다.

Flutter는 이와 다르게 Navigator 클래스의 push() pop()을 메서드를 사용합니다.

새로운 화면으로 이동할 때는 push()

다시 돌아올 때는 pop()을 사용합니다.

자료구조의 stack과 똑같습니다.

 

1. routes 설정하기

flutter에서 route는 경로라는 뜻입니다.

각 페이지에 이름을 지정하고 해당 이름에 알 맞은 페이지를 지정해놓으면

경로가 됩니다.

그럼 설정해보겠습니다.

RouteDemo()라는 클래스를 만들었습니다.

앱이 실행될때 실행되도록 runApp에 넣어줬습니다.

StatelessWidget을 상속받았기 때문에 build 메서드를 반드시 정의해야 합니다.

debug banner를 지우기 위해 false로 설정했습니다.

initial route를 편의상 '/'로 지정했습니다. '/'는 루트 경로입니다.

route { } 안에 '/'는 MainPage() 메서드로 이어지고

'/next'는 NextPage()로 경로를 설정했습니다.

 

route는 Map입니다. 화면 경로에 이름을 KEY로 갖고

값에 실제 화면 위젯을 넣습니다.

 

2. 실제 화면 위젯 작성

MainPage입니다. 하나의 위젯으로 StatelessWidget을 상속받고 있습니다.

Scaffold 위젯을 사용하여 appBar와 Button을 만들었습니다.

버튼을 누르면

_showNextPage 메서드가 실행됩니다.

 

다음 페이지로 이동하기 위해서는 Navogator 클래스의 pushNamed 메서드를 사용해야 합니다.

pushNamed에 '/next'를 넣어주면 '/next'에 매핑되어 있는 위젯으로 이동합니다.

 

NextPage 위젯입니다.

MainPage와 구성이 같습니다.

한 가지 다른 점은 Navigator.pop을 사용했다는 점입니다.

push로 '/'로 이동할 수도 있지만, 그렇게 되면 스택에 위젯이 계속 쌓이게 됩니다.

pop을 해줘서 뒤로 가기와 동일한 효과를 버튼에 추가합니다.

 

실행해보겠습니다.

간단한 예제이기 때문에 별도로 파일을 분리하지 않고

main.dart 파일에 모두 작성하였습니다.

 

다음에 파일을 분리하는 방법을 수정해서 올리도록 하겠습니다.

 

여기까지 골드였습니다.

감사합니다.

 

참고자료 : 처음 배우는 플러터

https://api.flutter.dev/flutter/widgets/BuildContext-class.html

BuildContext class - widgets library - Dart API