[flutter] 페이지 이동시 값 전달, 수신 - 네비게이션 방법 (파라미터 전달 방법)

플러터에서 네비게이션 즉, 페이지 이동 방법 종류, 페이지 이동시 파라미터 전달 방법에는 크게 2가지 방법이 있습니다.

수동 이동 방법과 페이지를 네이밍 하여 이동하는 방법 이렇게 크게 두가지를 정리해보겠습니다.

 

1. 수동 방법

1-1 .이동 (Push)

// 페이지 이동
// 이동하고자 하는 페이지를 Navigator에 Push한다
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => RouteOne(),
  ),
);

2. 네임드 페이지 이동 방법

앱시작 부분 (메인 함수에 라우팅 등록)

MaterialApp(
  //시작 페이지 
  initialRoute: "/",
  
  routes: {
    "/": (context) => HomeScreen(),
    "/one": (context) => RouteOne(),
    "/two": (context) => RouteTwo(),
    "/three": (context) => RouteThree(),
  },
),

이동 방법

Navigator.of(context).pushNamed(
	// 등록한 라우팅 이름
    '/two'
  );

 

3. 이동 시 자식페이지에 파라미터 전달 및 수신 방법

3-1. 생성자 파라미터 전달과 수신

// 부모 페이지
// 페이지 생성시 자식 페이지 생성자에 값 주입
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => RouteOne(
      number: 3,
    ),
  ),
);

// 자식 페이지 생성자
int number;
RouteOne({required this.number, super.key});

3-2 settings  arguments를 이용한 전달, 수신

// 부모 페이지
MaterialPageRoute(
  builder: (_) => RouteOne(),
  settings: RouteSettings(arguments: 789),
)

//자식 페이지
final args = ModalRoute.of(context)!.settings.arguments;

3-3 자식 페이지에서 부모페이지로 값 전달

 

// 자식 페이지에서 Pop할때 값 전달
Navigator.of(context).pop(456);

//부모페이지에서 async await을 이용해서 값 수신
onPressed: (() async {
final num = await Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => RouteOne(),
  ),
);

 

* 참고 : 자식 페이지에서 현재 페이지 종료시 

Navigator.of(context).pop();

을 해주면 됩니다.

 

보통 라우팅할때 페이지별로 네이밍을 하여 이동하는 형식을 많이 추천합니다.