[Flutter] 화면전환 Navigator Push, Navigator Pop

플러터에서는 화면에서 다른 화면으로 이동할 때 Navigator를 사용한다.

이 때 push, pop 메소드를 사용해서 화면을 이동하는데 stack 자료구조에 대한 간단한 이해가 필요하다.

stack이란 자료를 쌓아올리는 것을 말하며, 자료를 넣는 것을 push, 자료를 꺼내는 것을 pop이라고 한다.
꺼내지는 순서는 가장 최근에 push한 자료부터이며 이처럼 가장 나중에 넣은 값이 먼저 나오는 것을 LIFO(Last In First Out)이라고 한다.

Navigator의 push 메소드를 사용해서 메인 페이지 -> 상세 페이지 -> 결제 페이지 순으로 이동했다면, pop 메소드를 사용해서 결제 페이지 -> 상세 페이지 -> 메인 페이지로 돌아올 수 있는 것이다.

1. Navigator.Push()

Push vs PushNamed

Push를 사용할 경우 코드를 반복해서 사용해야 함

  onPressed: () {
    if (user.state = "login") {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const SecondScreen()),
      );
    } else {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const FirstScreen()),
      );
    }
  }

 

PushNamed를 사용할 경우 한번 선언하기만 하면 반복해서 재사용 가능함

MaterialApp(
  title: 'Named Routes Demo',
  // 앱이 시작되는 경로
  initialRoute: '/',
  // 해당 경로로 이동할 때 빌드할 화면 정의
  routes: {
    '/': (context) => const FirstScreen(),
    '/second': (context) => const SecondScreen(),
  },
)

onPressed: () {
  if (user.state = "login") {
      Navigator.pushNamed(context, '/second');
  } else {
      Navigator.pushNamed(context, '/');
  }
}

2. Navigator.pop()

Navigator.pop(context) vs Navigator.of(context).pop()

둘 사이에 차이는 없으며 showDialog()를 사용해서 팝업을 닫을 경우 Navigator.of(context, rootNavigator: true).pop()을 사용한다.

onPressed: () {
  Navigator.pop(context);
}

 

references
https://docs.flutter.dev/cookbook/navigation/named-routes
https://api.flutter.dev/flutter/widgets/Navigator/restorablePushReplacementNamed.html
https://api.flutter.dev/flutter/widgets/Navigator-class.html
https://newbedev.com/flutter-navigator-of-context-pop-vs-navigator-pop-context-difference