[Flutter] 플러터 페이지 간 이동과 context의 의미 (Multi-Screen Apps Using Routes and Navigation And About context)

플러터 화면 이동

플러터에서는 Navigator을 통해 페이지간 이동을 다룰 수 있다.

페이지이동을 스택구조로 관리하여 Push와 Pop을 명령을 통해 페이지를 이동한다.

1. 이전 페이지 이동

현재 페이지를 스택에서 제거하여 이전 페이지로 이동한다. 스택에 페이지가 남아있다면 해당 페이지가 표시되고, 없다면 앱이 종료된다.

Navigator.pop(context);

2. 다음 페이지 이동

현재 페이지를 스택에 남겨놓고 NextPage라는 이름을 가진 페이지로 이동한다. 이 경우 다음 페이지에서 Pop을 하면 현재 페이지로 돌아올 수 있다.

Navigator.push(
    context, MaterialPageRoute(builder: (context) => NextPage()),
);

현재 페이지를 스택에 삭제하고 NextPage라는 이름을 가진 페이지로 이동한다.

이 경우 다음 페이지에서 Pop을 하면 현재 페이지의 이전 페이지로 돌아간다. (없으면 앱 종료)

Navigator.pop(context);
Navigator.push(
    context, MaterialPageRoute(builder: (context) => NextPage()),
);

3. 새로운 페이지로 시작

지금까지 모든 페이지를 스택에서 삭제하고 NewPage라는 이름을 가진 페이지로 이동한다. 이 경우 NewPage가 가장 첫 페이지가 된다.

Navigator.pushNamedAndRemoveUntil(context, '/', (_) => false);
Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()),);

만약 여러 페이지를 탐색하고 싶다면?

Navigator.push는 단순히 이름없이 Class를 호출하여 페이지를 이동하지만 복잡한 페이지 호출을 해야하는 경우 routes를 통해 페이지에 이름을 지어 호출할 수 있다.

initialRoute: '/',
      routes: {
        '/':(context) => Screen0(),
        '/first':(context) => Screen1(),
        '/second':(context) => Screen2(),
      },

• initialRoute: 앱의 시작점을 나타내는 home과 같은 기능을 한다.
• routes: routes 프로퍼티는 이용가능한 named route와 해당 route로 이동했을 때 빌드될 위젯을 정의한다.

위와 같이 main Controller페이지에 이동할 위젯 페이지와 그 페이지의 이름을 정의해둔다.

onPressed: () {
                Navigator.pushNamed(context, '/second');
              },

그 다음 Navigator.pushNamed를 통해 /second로 이동한다고 알려줄 수 있다.

이는 위에 선언한 Screen2()를 호출하게 될 것

context란?

context(BuildContext)는 flutter에서 여러 상황에서 인자로 사용되고 있지만 그 의미를 정확히 이해하지 못해 공식문서를 보며 다시한번 정리해보았다.

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

한마디로 지금 위젯이 누구인가를 알려주는 인자라고 생각하면 될 듯 하다.