[Flutter] Navigator를 사용해 route 이동하기

겨레·2024년 7월 12일

정상적으로 로그인된 경우 route를 바꿔 메인 화면에 보여 주고싶은 페이지로 이동되게 해 보자!

그 전에 폴더 구성에 대해 잠깐 이야기하고 가보자!
아래 사진은 현재까지 생성된 폴더와 파일들...

asset → 폰트, 이미지 등
common → 모든 기능들에서 공통으로 필요할만 한 것들
user → 유저와 관련된 것들로 추후 폴더, 파일들이 생성될 예정이다


그럼 이어서 화면 이동 코드 작성해보자!

전환될 화면 중 하나인 tab bar 코드 작성해주고,
login_screen.dart에서 Navigator 코드 추가해주기!

  • Route : screen, page라고 불리는 위젯
  • Navigator : Route(위젯)을 관리하는 위젯

  • push, pop
    - push를 사용하기 위해서는 context와 route가 필요함
    - MaterialPageRoute는 이동하려는 Screen을 Route로 만들어 줌
    - pop은 context만 넘겨주면 됨
// => 에로우펑션을 사용하면 코드를 더 간결하게 작성할 수 있음!
Navigator.of(context).push(
         MaterialPageRoute(
           builder: (_) => const RootTab(),
             ),
           );


에러 없이 정상적인 로그인이 완료됐다면,
이렇게 RootTab로 화면이 전환되는 것을 확인할 수 있다.

profile
호떡 신문지에서 개발자로 환생

0개의 댓글