[flutter] 내비게이터(Navigator)를 이용한 화면 이동 방법

flutter에서 화면은 route라고 하며 내비게이터(navigator)를 이용해 route를 이동할 수 있습니다. Navigator을 이용하여 화면(route) 이동 방법을 알아보겠습니다.

 

 

내비게이터는 스택 형태로 되어있습니다. 스택은 보통 push를 이용해 쌓고 pop을 이용해 뺍니다. 플러터의 내비게이터도 마찬가지로 Navigator.push()와 Navigator.pop()을 사용하고 Navigator.push()를 사용하면 기존 화면 위에 새로운 화면을 쌓고 Navigator.pop()를 이용해 기존 화면 위에 올라간 새로운 화면을 내립니다.

 

 

▣ 새로운 화면 이동을 위한 Navigator.push()

텍스트 버튼을 만들고 버튼을 누르면 두 번째 페이지로 이동하는 코드입니다. Navigator.push()를 사용했고 첫 번째 인자는 현재 페이지를 기억할 수 있도록 context를 넣어줍니다. 두 번째 인자는 이동할 페이지를 넣어주는데 이때 MaterialPageRoute함수를 이용합니다.

TextButton(
  child: Text('두번째페이지로 이동'),
  onPressed: () {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => SecondPage()));
  },
)

 

 

▣ 기존 화면으로 돌아가기 위한 Navigator.pop()

기존 화면으로 돌아가기 위해 Navigator.pop() 함수를 사용합니다.

TextButton(
    onPressed: () {
      Navigator.pop(context);
    },
    child: Text('첫번째페이지로 이동'))

 

 

▣ 지정한 페이지 주소로 이동하는 Navigator.pushNamed()

route(화면)의 주소를 지정해 놓고 해당 주소로 이동하는 방법도 있습니다. Navigator.pushNamed()를 사용하면 됩니다. Navigator.pushNamed()를 사용할 때는 MaterialApp에서 home대신 initalRoutes를 사용하고 routes를 이용해 각 route(화면)마다 페이지 주소를 지정해 줍니다.

Widget build(BuildContext context) {
  return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: {
        '/': (context) => MyNavi(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      });
}

 

그리고 Navigator.pushNamed(현재 페이지 context, 이동하려고 하는 페이지 주소);와 같이 코딩합니다. 

TextButton(
  child: Text('두번째페이지로 이동'),
  onPressed: () {
    Navigator.pushNamed(context, '/second');
  },
),