[Flutter] 화면 전환의 종류

Context란?

1. 위젯 트리에서 현재 위젯의 위치를 알려주는 (handle)정보이다.
2. BuildContext는 stateless위젯이나 state 빌드 메서드에 의해서 return 된 widget의 부모가 된다.

---

Navigator를 이용하여 화면 전환

push

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

데이터는 생성자를 통해 전달

---

pushNamed

routes: {
        "/first": (context) => const FirstPage(),
      },

MaterialApp위젯의 routes 부분에 key-value 형태로 사용하고자 하는 라우터 네임과 위젯을 등록

MaterialApp(
  title: 'Flutter Widgets',
  theme: ThemeData(
    primaryColor: Colors.blue,
    brightness: Brightness.dark),
  initialRoute: HomeScreen.routeName,
  routes: routes
)

final routes = {
  HomeScreen.routeName: (context) => HomeScreen(),
  SecondScreen.routeName: (context) => SecondScreen(),
};

Navigator.pushNamed(context, SecondScreen.routeName);

데이터는 생성자를 key-value를 통해 전달

@override
  Widget build(BuildContext context) {
    Map<String, dynamic> _argument =
        ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;
    print(_argument["title"]);
    ...
    }

Navigator.of(context).pushNamed("/first", arguments: {"title": "Test"});

---

pushAndRemoveUntil

: 페이지를 오픈할 때 스택에 쌓여있는 페이지를 제거하고 이동하는 방법

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

---

pushNamedAndRemoveUntil

: pushAndRemoveUntil 방법과 동일한 named 방식

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

---

popAndPushNamed

: 페이지 하나만 제거하고 이동할 때 사용가능 → named방식만 제공

Navigator.of(context).popAndPushNamed("/second");

second 페이지는 제거됨

---

pop

: 쌓여있는 스택을 하나씩 닫고 이전페이지로 돌아감

⚠️ 이전 페이지로 이동할 때에도 데이터를 전달할 수 있음

Navigator.of(context).pop("callBack");

→ object로도 전달이 가능함

---

canPop

: 닫을 수 있는 페이지가 있는 지 확인

Navigator.of(context).canPop();

---

maybePop

: 닫을 수 있으면 닫고 닫을 수 없으면 더 이상 닫지 않는 기능

Navigator.of(context).maybePop();

---

popUntil

: 모든페이지를 닫는 방법

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

→ 최하단 라우터를 제외하고 닫아주게 됨