페이지 이동

Dec 29, 2025

Contents

페이지 이동

Navigator.push() 함수 사용


Navigator.push(
	context, // 첫 번째 인자, BuildContext
	// 두 번째 인자. MaterialPageRoute를 사용해 builder 속성에 이동할 페이지를 리턴해주는 함수를 작성.
	MaterialPageRoute(
		builder: (context) {
			return ResultPage();
			},
		},
	);

플러터에서 Navigator는 페이지를 스택 구조로 관리함.

Navigator를 사용하여 새로운 페이지로 이동 시 페이지 스택에 페이지를 Push 한다.

돌아가기를 누르면 스택 최상단의 페이지가 제거되는 방식.

A → B 이동 시


// 페이지 이동 (Navigator.push 시 await를 걸어 Navigator.pop 함수에서 전달한 데이터를 result라는 변수에 담아준다.
final result = await Navigator.push(
	context,
	MaterialPageRoute(builder: (context) => const SelectionScreen()),
);
// 값을 받을 때 안드로이드 뒤로가기 버튼이나 아이폰의 제스쳐를 이용해 뒤로 가게 된다면 반횐되는 값은 null이니, null 체크 필수!
if(result != null){
	// TODO
}

데이터 전달

RouteSettings의 arguments 이용


// 넘길 때
Navigator.push(
	context,
	MaterialPageRoute(
		builder: (context) {
			return ResultPage();
		},
		settings: RouteSettings(
			arguments: result // 넘길 값
		)
	),
);

// 받을 때, 새로운 페이지에서 받을 때 사용
ModalRoute.of(context)!.settings.arguments

뒤로 가기

Navigator.pop() 함수 사용