[Flutter] 화면 이동하기 (Navigator Push & Pop)

안녕하세요 Foma 👟 입니다!

오늘은 플러터에서 두 화면(ScreenA와 ScreenB)을 서로 이동하고 되돌아오는 방법에 대해 정리하도록 하겠습니다!

 

바로 시작할게요~

---

ScreenA

 

ScreenA를 만들어줍니다.

 

import 'package:flutter/material.dart';

class ScreenA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Screen A page"),
      ),
    );
  }
}

---

ScreenB

 

ScreenB를 만들어줍니다.

 

import 'package:flutter/material.dart';

class ScreenB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Screen B page"),
      ),
    );
  }
}

---

ScreenA에서 ScreenB로 이동하기

 

ScreenA에서 ScreenB.dart파일을 import 해줍니다.

 

import 'ScreenB.dart';

 

Scaffold body에 아래와 같이 버튼을 만들어줍니다.

 

 Scaffold(
      appBar: AppBar(
        title: Text("Screen A page"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Go to Main Page"),
        ),
      ),
    );

 

그리곤 버튼을 클릭했을 때 Navigator를 push해주고 어떤 스크린으로 이동할지 정해줍니다.

 

ElevatedButton(
          child: Text("Go to Screen B Page"),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (_) => ScreenB()));
          },
        ),

 

아래와 같이 버튼을 누르면 ScreenB 페이지로 이동하게 됩니다.

 

---

ScreenB에서 ScreenA로 되돌아가기

 

ScreenB도 마찬가지로 버튼을 만들어주고 이번에 되돌아가기 위해 Navigator에 현재 context를 pop 해줍니다.

 

   body: Center(
        child: ElevatedButton(
          child: Text("Go to Screen A Page"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),

 

아래와 같이 ScreenB에서 ScreenB로 되돌아가게 됩니다.

 

---

오늘은 이렇게 간단하게 화면 이동하는 법에 대해서 알아보았는데요.

 

혹시라도 틀린 점이 있으면 지적해주세요!

---

Referece 

 

새로운 화면으로 이동하고, 되돌아오기