Q&A - Flutter에서 화면간 정보/결과 전달을 어떻게 해야 하나요?

질문

Flutter에서 화면간 정보전달은 어떻게 해야 하나요?

예를 들어 현재 화면이 목록화면이고 여기서 게시물 등록 화면으로 이동한 후 정상적으로 게시물이 추가된 경우에는 목록을 갱신하고, 그냥 백 버튼을 누르거나 취소를 한 경우에는 이전 목록화면을 그대로 유지하고 싶습니다. 어떻게 해야 할까요?

​

답변

Navigator에 새로운 화면을 표시하기 위해서 MeterialPageRoute와 같은 Route에 Widget을 설정한 후 navigator에 push합니다.

(또는 /post/add와같이 이름을 지정해서 이동할수 있습니다)

이럴경우 navigator의 이전에 남아 있던 page는 statck에 그대로 남아 있게 되는데, 현재 page를 navigator에서 pop을 하고 나면 statck에 있던 이전 page가 다시 화면에 표시되게 됩니다.

​

그냥 이전 화면으로 단순한 이동이라면 상관없겠지만, 어떤 작업을 완료한 후 그 결과를 이전화면에 전달해야 한다면 pop함수에 argument를 추가해 이전 화면으로 값을 전달 할 수 있습니다. 물론 이럴게 사용하기 위해서는 이전 화면에서도 await로 결과 값을 대기하고 있어야 합니다.

​

아래 예제 코드와 같이 목록화면에서 게시물 추가 화면을 호출하기 위해서  navigator에 push하고 await로 새로운 화면에서 결과가 오기를 기다립니다.

// [post_list.dart]
// 게시물 목록화면에서 추가화면으로 이동하는 경우
// route를 직적 설정해서 push하는 경우 
final route = MaterialPageRoute(builder: (context) => AddPage()); 
final addResult = await navigator.push(route) 

// 이름으로 push하는 경우 
// final addResult = await navigator.pushNamed('/post/add');

if(addResult ?? false) { 
  // 게시물추가 작업이 정상적으로 완료된 후 다시 목록으로 돌아온경우 
  // 목록을 갱신해줌 
  // 안드로이드에서 백버튼을 눌러서 이전화면으로 돌아온경우 결과값은 null이 반환된다. 
}

// [post_add.dart]
// 게시물 추가 화면에서는 모든 작업이 끝난 후 아래와 같이 pop를 하면서 true를 인자로 전달함으로써 정상적으로 처리되었을을 알립니다.
// 게시물 추가화면에서 작업 처리후 다시 목록화면(이전)으로 돌아가는 경우
navigator.pop(true);