[Flutter] popUntil할 때 데이터 전달까지 하고싶다면

[popUntil]

Navigator.popUntil(context, (route) => false)

네비게이터에서 제공하는 pop()은 스택구조에서 제일 위에 있는 루트를 제거하는 기능이다. 근데 만약 A->B->C 순서대로 루트를 호출한 상태에서 C-> A로 가면서 B도 제거하고 싶다면 popUntil을 통해 제거할 수 있다

Navigator.popUntil(context, ModalRoute.withName("/"));

루트테이블에 "/"로 등록된게 A루트라면, 위와 같은 코드로 돌아갈 수 있다.

그런데 C->A루트로 이동할때 데이터를 전달하고 싶다면 어떻게 해야하는가?

 

[참고 사이트]

https://medium.com/@hungregistermail/flutter-popuntil-with-return-data-ece825aedbd0

Flutter popuntil with return data

이름은 popUntil을 사용하며 data를 전달하는 방식이라 하지만, 실상은 popUntil을 사용하는 것이 아니라, pop을 통해 하나하나 닫으면서, 각각의 루트에서 Navigator.pushNamed를 통해 루트를 열고, then을 통해 비동기로 받을 때 값을 처리 해서, 특정 값이 있다면 루트를 닫는 등의 행위를 하는 것이다.

 

위의 예제보다 더 간단히 문자열 하나를 파라미터로 해보겠다.

routes: {
  "/": (context) => MainField(),
  "/map": (context) => LetsEatMap(),
  "/mapInfo": (context) => LetsEatMapInfo(),
},

루트테이블은 위와 같이 등록되어있고,

 

"/"로 등록된 루트에서 아래와 같이 "/map" 네이밍 된 루트를 열었다.

Navigator.of(context).pushNamed('/map').then((valu) {
  if (valu != null) {
  	print('/map 루트에서 값을 넘겨받음 :: $valu');
  } else {
 	 print('/map 루트에서 그냥 닫혔음');
  }
});

열면서 이후에 valu가 있는지 없는지 체크하도록 두었다.

 

그리고 "/map"로 등록된 루트에선 "/mapInfo" 루트를 열었다.

Navigator.pushNamed(context, '/mapInfo', arguments: _place).then((valu) {
  if(valu != null){
  	Navigator.pop(context, valu);
  }
});

여기서 중요한것은 map, 두 번째 루트에서 세 번째 루트인 mapInfo를 열 때 then으로 valu를 체크해서, 만약 값을 받았다면 두 번째 루트를 닫으면서 valu를 그대로 전달한다. 이게 핵심! 이 코드 한줄때문에, 세 번째 루트에서 아래 코드가 돌게 되면 첫 번째 루트까지 데이터가 전달된다.

Navigator.of(context).pop('aaaa');

'aaaa'라는 데이터를 전달하며 세 번째 루트가 닫히면, 두 번째 루트에서는 valu('aaaa')를 체크하여 null이 아니므로, 두 번째 루트를 닫으면서 'aaaa'를 재 전달하게 되고, 첫 번째 루트에서는 'aaaa'를 넘겨받을 수 있다.

 

참고한 예제 사이트에서는 넘겨주는 데이터를 클래스로 작성해서 Map형식 및 추가 키 값을 넣은 것 뿐이므로 위 내용만 간단히 이해하면 어렵지 않을 것이다.