플러터(Flutter) 라우터를 이용한 페이지 이동

웹 앱을 만들어본 경험이 있는 분이라면 URL을이용해서 페이지를 이동하는 방법이 익숙할 것입니다.

플러터에도 동일한 라우팅 시스템이 있습니다. 이번에는 두 화면을 만들고 Navigator의 push와 pop 메소드를이용해 화면을 이동하는 앱을 만듭니다.

라우트를 이용할 것이기때문에 main.dart 파일을 수정합니다.

main.dart 파일의 전체 내용입니다. 처음 앱을 만들면 나오는 카운터 앱 전체 코드를 지우고 routes.dart 파일의 routes를 MaterialApp 의 routes 속성으로 지정합니다. routes의 내용은 아래에 있습니다.

routes는 first.dart 파일과 second.dart 파일 두개를 사용합니다. 각 파일은 FirstPage, SecondPage 클래스입니다. 라우트는 /, /first, /second세개 입니다. 앱을 처음 시작하면 / 을 바라보기 때문에 / 라우트는 FirstPage 클래스를 지정합니다.

각 페이지의 내용입니다.

첫번째, 두번째 페이지의 전체 내용입니다. FirstPage에서 SecondPage로 이동하는 Navigator 코드가 있습니다. 한 페이지에서 다음 페이지로 push 할 때는 pushNamed 메소드를, pop해서 돌아갈 때는 pop 메소드를 이용합니다.

이 방법을 사용하지 않으면, 매 페이지 이동시 routes.dart의 구현처럼 새 페이지 인스턴스를 넘겨주어야합니다. 공식 홈페이지의 화면 이동 안내를 읽어보세요. 웹 개발에 익숙한 경우에 이번 글의 라우팅 시스템을 이용하면 좋을 것 같습니다.