[Flutter] Routes 와 Navigation (feat. 멀티스크린)

앱에서 단일 스크린(페이지) 앱은 거의? 없을 거라 생각합니다. UX/UI를 생각해서 개발하면 다양한 페이지가 나오는데 이런 멀티 스크린을 어떻게 처리할 지 정리해보겠습니다.

 

순서

1. 두 개의 경로 만들기

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

간단하게 페이지를 2개 만든다고 생각하면 될 것 같습니다. 2개의 Stateless한 위젯을 만들어 서로 라우팅하도록 합니다.

 

 

2. Navigator.push()를 사용하여 두 번째 경로로 이동.

push로 경로stack에 경로를 추가합니다. 팬케이크를 예로 들면 팬케이크는 위로 하나씩 쌓이고, 실제 화면을 볼 수 있는 것은 맨 위의 팬케이그가 떨어질 때 (navigatior.pop) 입니다.

 

Navigator.push()로 Route가 관리하는 경로 stack에 추가할 수 있습니다. 

위의 1번에서 FirstRoute에서 onPressed() 콜백을 아래 코드로 수정합니다

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

 

3. Navigator.pop()을 사용하여 첫 번째 경로로 돌아감.

두 번째 route를 답고 다시 첫 번째 route로 돌아가는 방법은?

-> Navigator.pup()을 이용해 Route를 관리하는 경로 stack에서 현재 route를 pop해 이전으로 돌아갑니다.

 

아래 코드에서 SecondRoute에서 onPressed() 콜백을 아래 코드로 수정합니다.

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

 

# Navigator로 이동할 때 data도 같이 넘겨 주는 방법.

 

 

 

 

[참고]

flutter.dev/docs/cookbook#navigation