[Flutter] 화면 간 이동 구현 | Navigator

이동하는 방법

 

---

 

플러터의 화면 구성은 Stack으로 생각하면 된다.

 

따라서 다른 화면으로 이동 하고 싶을 때는 push 

이전 화면으로 돌아가고 싶으면 pop을 하면 된다.

 

오앙 신기!

 

https://docs.flutter.dev/cookbook/navigation/navigation-basics

Navigate to a new screen and back

공식 홈페이지에 설명이 아주 잘 나와있다!

 

아래와 같이 구현 할 수 있다.

 

Navigator.push

push 할 때, 어떤 페이지를 push 할 지를 정해줘야하는데, 

이때 사용자가 커스텀 하여 생성 할 수도 있고,

플랫폼 별로 만들어져 있는 MaterialPageRoute를 사용해도 된다.

// + Move to other Screen
Navigator.push(
    MaterialPageRoute(
      builder: (context) => OtherScreen(),
    ),
);
// Move to other Screen +

실제 사용 예시

...
// Information button
Container(
  padding: const EdgeInsets.only(right: 10),
  child: Column(
    children: <Widget>[
      IconButton(
        icon: const Icon(Icons.info),
        onPressed: () {
          // + Move to Detail Screen
          Navigator.of(context).push(
            MaterialPageRoute(
              fullscreenDialog: true,
              builder: (context) =>
                  DetailScreen(movies[_currentPage]),
            ),
          );
          // Move to Detail Screen +
        },
      ),
      const Text('Information', style: TextStyle(fontSize: 11))
    ],
  ),
),
...

 

디버깅 :

인포메이션 버튼을 눌렀을 때, 화면이 잘 전환되는 것을 볼 수 있다.

 

Navigator.pop

pop은 따로 페이지 지정을 해 줄 필요가 없다.

Navigator.pop(context);