2022. 11. 5. 21:05ㆍ모바일어플개발/Flutter
안녕하세요~ totally 개발자입니다.
Navigator
오늘 다룰 부분은 Navigator로 화면을 이동하고 전환할 때 사용됩니다. Navigator는 스택(Stack) 구조를 통하여 구현되며 제일 간단하게 다음 화면으로 이동, 이전 화면으로 이동 이 2가지를 먼저 이해하면 됩니다. 그 2가지는 push와 pop입니다. push를 사용하는 것이 다음 화면으로 이동, pop을 사용하면 현재 화면을 꺼내기 즉 이전 화면으로 돌아가는 형태가 됩니다. 바로 예제로 들어가보도록 하겠습니다.
첫 번째 스크린입니다. Navigator.push 메소드를 이용하면 다음 화면으로 전환할 수 있는데, 그 구조는 18-23번째 줄처럼
Navigator.push(context, MaterialPageRoute(builder:(_) => 다음화면클래스이름())) 이렇게 됩니다.
두 번째 스크린 클래스입니다. Get Started를 누르면 이 페이지로 전환됩니다. 여기에서 뒤로 가기 < 버튼을 누르면 원래 첫 번째 화면으로 다시 돌아갈 수 있도록 설정하기 위해서는 Navigator.pop(context)만 사용해주면 뒤로 가기를 구현할 수 있습니다. 이 2가지만 이해하셔도 기본적인 화면 전환을 구현하는데는 무리가 없고, 추가적으로 Named routes, popUntil, pushReplacementNamed 등 여러가지 메소드가 있는데 이것들도 원리는 동일하니 상황에 맞는 방법을 사용하시면 됩니다. pushReplacement 경우에는 예를 들어 사용자가 로그인하고 메인 페이지로 접속했을 때, 뒤로 가기 버튼을 누르더라도 더 이상 로그인 페이지로 되돌아가지 않게 하기 위해 사용될 수 있습니다. popUntil 경우에는 스크린1, 스크린2, 스크린3, 스크린4, 스크린5가 있다고 가정하고 사용자가 스크린5에 도달하여 스크린1로 되돌아가고자 할 때 일반적으로 pop을 사용하면 반복해서 사용해줘야 하지만, popUntil을 사용하면 한 번에 돌아갈 수 있게 구현할 수 있습니다.
[전체 소스 코드 (test.dart)]
[전체 소스 코드 (screen1.dart)]
[유튜브 강좌 영상]