[Flutter] 새로운 화면으로 이동하고 되돌아오기(Navigator push,pop)

1.이동할 route 생성
2.Navigator.push()를 사용하여 route전환
3.Navigator.pop()를 사용하여 다시 되돌아오기

🔎완성코드

Page1에서 버튼을 누르면 Page2로 이동하고, Go back! 버튼을 누르면 다시 Page1으로 되돌아온다.

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
    title: 'Navigation',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("open page2"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('page 2'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

1.두개의 route 생성

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open Page2'),
          onPressed: () {
            // 눌렀을 때 두 번째 route(page2)로 이동하도록 설정
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page2"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 눌렀을 때 첫 번째 route(page1)로 되돌아가도록 설정
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

2.Navigator.push()를 사용하여 route전환

Navigator.push() : 새로운 route로 전환하기 위해 사용
push() 메서드는 Route를 Navigator에 의해 관리되는 route 스택에 추가해야한다.

Route는 어디서 오는 걸까? 직접 생성하거나, 새로운 route로 이동 시 플랫폼 특화된 애니메이션을 사용하기 좋은 MaterialPageRoute의 을 사용할 수 있다.

FirstRoute 위젯의 build() 메서드에서 onPressed() 콜백 수정하기:

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

3.Navigator.pop()를 사용하여 다시 되돌아오기

두 번째 route를 닫고 이전 route로 돌아가기 위해 Navigator.pop()을 사용한다.
pop() 메서드는 Navigator에 의해 관리되는 route 스택에서 현재 Route를 제거함 -> page2를 제거하고 page1으로 이동

이전 route로 되돌아 가기 위해, SecondRoute 위젯의 onPressed() 콜백 수정하기:

onPressed: () {
  Navigator.pop(context);
}

📍참고자료

• flutter공식문서