[Flutter] Navigation and routing

 

https://docs.flutter.dev/ui/navigation

 

플러터에서 Navigator는 화면을 Stack으로 표시하는데.

다른 페이지로 이동하려면 Navigator경로를 통해 액세스 BuildContext하고 push() 나  pop()을 사용한다.

 

* Stack은 데이터 구조의 하나로 가장 최근에 추가된 항목이 가장 먼저 처리됨을 의미 (LIFO, Last In First Out) 

 

 

---

 

push

플러터에서 다음 화면으로 이동하는 가장 기본적인 방법으로

MaterialPageRoute를 사용하여 이동하고자 하는 위젯을 등록한다.

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => const RouteOneScreen()
  )
);

 

페이지 이동 시 데이터 전달은, 오픈하는 페이지 위젯의 생성자로 받고자 하는 변수를 등록 후,

router에 전달할 위젯에 파라미터로 해당 데이터를 전달한다.

  final int number;

  const RouteOneScreen({
    super.key,
    required this.number,
  });

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => RouteOneScreen(number: 123)
  )
);

 

 

pushNamed

push처럼 오픈할 위젯을 전달하는 것이 아닌, 미리 라우터를 등록 후 라우터명으로 이동할 수 있는 방법으로 

main.dart 파일의 MaterialApp.routes에 key-라우트명 형태로 라우터 네임과 위젯을 등록하여 사용한다.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    // 초기 경로 설정
    initialRoute: ('/'),
    // 경로 설정
    routes: {
      '/': (BuildContext context) => HomeScreen(),
      '/one' : (BuildContext context) => RouteOneScreen(), 
      '/two' : (BuildContext context) => RouteTwoScreen(),
      '/three' : (BuildContext context) => RouteThreeScreen(),
    },
  );
}

Navigator.of(context).pushNamed("/one");

 

전달할 때에는 arguments에 전달하고자 하는 데이터를 key-value 형태로 넣어주면 된다.

   Navigator.of(context).pushNamed(
    '/three',
    arguments: 11111,
  );

전달받은 argument는 오픈하는 페이지에서 ModalRoute를 통해서 얻을 수 있다.

final argumnets = ModalRoute.of(context)?.settings.arguments;

 

 

 

 

pushAndRemoveUntil

pushAndRemoveUntil은 페이지 이동 시, 스택으로 쌓여있는 페이지를 제거하고 이동하는 방법으로.

MaterialPageRoute에 이동하고자 하는 위젯을 추가하고 어느 페이지까지 스택을 제거할 지를 넣어주면 된다.

false인 경우 모든 페이지를 제거하고 이동한다는 의미이다.

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(
	builder: (context) => const RouteTwoScreen()), (route) => false);

Navigator.pushAndRemoveUntil(
  MaterialPageRoute(
    builder: (BuildContext context) => const RouteTwoScreen()
  ),
  ModalRoute.withName('/'),
);

 

 

pushNamedAndRemoveUntil

pushAndRemoveUntil의 named 방식으로, 페이지를 오픈하고 지정된 조건이 충족될 때까지 이전 경로를 모두 제거한다.

Navigator.of(context).pushNamedAndRemoveUntil("/one", (route) => false);

Navigator.pushNamedAndRemoveUntil(context, '/one', ModalRoute.withName('/'));

 

 

pushReplacement

이동시 페이지를 제거하고 이동하는게 아닌 페이지를 현재 이동하고자 하는 페이지로 교체하면서 이동할 수 있는 방법.

Navigator.of(context).pushReplacement(
  MaterialPageRoute(
    builder: (context) => const RouteTwoScreen()
  )
);

 

 

pushReplacementNamed

pushReplacement의 named 방식이다.

  Navigator.pushReplacementNamed('/three');

 

 

---

 

pop

pop은 쌓여있는 스택을 하나씩 제거하면서 이전 페이지로 돌아가는 기능이다.

Navigator.of(context).pop();

이전 페이지로 이동할 때에도 데이터를 전달할 수 있는데, pop 기능에 parameter를 전달할 수 있고, 해당 parameter는 Object로도 전달할 수 있다.

 

 

canPop

canPop은 페이지를 닫기의 가능 여부에 대해서 boolean 값을 리턴해주는 기능으로

현재 페이지에서 더 이상 닫을 수 있는 페이지가 있다면 true를 반환, 없다면 false를 반환해주어 pop 사용을 안전하게 해줄수 있다.

Navigator.of(context).canPop();

print(Navigator.of(context).canPop());
// canPop 은 pop 가능 여부를 true,false로 알려줌

 

 

maybePop

maybePop은 페이지를 닫을 수 있다면면 닫고, 닫을 수 없으면 더 이상 닫지 않는 기능을 제공해준다.

Navigator.of(context).maybePop();

 

 

popUntil

모든 페이지를 닫는 기능으로 isFirst를 사용하게 되면, 최하단 스택 라우터를 제외하고 닫아준다.

Navigator.of(context).popUntil((route) => route.isFirst);

 

 

 

popScope

canPop 매개변수로 설정하면 뒤로 동작이 비활성화된다. false.

시스템 안에서 제공하는 뒤로가기 기능을 막고, 보통 home에서 뒤로가기로 앱이 종료되는 것 방지하기 위해 사용한다.

PopScope(
  canPop: false, //시스템 안에서 제공하는 뒤로가기 기능을 false
  child: DefaultLayout(title: 'RouteOneScreen', children: [
    Text('argument $number'),
    ElevatedButton(
      onPressed: () {
        Navigator.of(context).pop(456,);
      },
      child: Text('Pop'),
    ),
  ]),
);